Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card Component Using Tailwind css

@Heniola45

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Experimented with Tailwind CSS for the first time, and thoroughly enjoyed the experience!.

What challenges did you encounter, and how did you overcome them?

Nil.

What specific areas of your project would you like help with?

Nil

Community feedback

SmartAce 170

@Smart-Ace-Designs

Posted

Hello. Nice work on your first attempt with Tailwind CSS!

One suggestion I can offer is how you handled spacing "Perfume": <p>P E R F U M E</p>

Instead of hard-coding the spaces between the letters you can use the "tracking" CSS class instead, which adds spaces for you: tracking-[.35rem]

In my case I had to specify and exact value by using the "[ ]" syntax to get it to look as close as possible instead of using one of the pre-defined values.

https://tailwindcss.com/docs/letter-spacing

You can also use the "uppercase" class to force the characters to all uppercase for you. I am not really sure of the advantage to using that instead of using typing all uppercase, but that is what I have seen other people do in some tutorials and it seems to be "best practice".

https://tailwindcss.com/docs/text-transform

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord