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

Product preview card component with Next.js, TS, TailwindCSS

P
MarcWebDev 100

@MarcWebDev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Wendy 1,890

@wendyhamel

Posted

Hi! Very nice solution you have here! Not much to comment on!

The only thing I like to point out is that you use 'on the fly' tailwind clases a lot and that you use px values in them. Some of the values you use, like my-[28px] for example is the same as the tailwind class my-7 Or the text-[14px] is the same as text-sm

The benefit of using preset tailwind classes is that it helpes you be consistent in the design. The tailwind classes are set in rem and not in px to keep your site more accessible and behave beter responsively.

I also noticed your text color custom classes and in your tailwind.config the colors for background and foreground. You could place the colors you use as text color in the tailwind.config as well. This will also help keep things consistent. Then you can just use nice color names instead of the less easy to remember and re-type Hex codes.

I hope this was usefull. Happy coding!

Marked as helpful

1

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