Skip to content
Submitted 20 days ago

product preview card using next/tailwind

#next#tailwind-css
fuergloria•140
@fuergloria
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

wanted to include the second Image with srcset (like explained under the mentioned article on web.dev) and tried some time to figure out how to use it with tailwind. figured out it was easier to just include two Images and hide them when not needed

Community feedback

  • P
    Jeff•70
    @YunlearningPosted 18 days ago

    Very well done. Give some suggestions for the proposal. The cart icon’s width={24} height={24} conflicts with h-4 w-4 (16px). Use consistent units (e.g., w-6 h-6 for 24px).

    0

Please log in to post a comment

Log in with GitHub

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