Skip to content
Submitted over 2 years ago

tailwindcss, mobile-first, darkmode

Azka•480
@Azkanorouzi
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

any recommendation? also checkout dark mode, light mode as well

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello there 👋. Good job on completing the challenge !

    The solution is very creative and beautiful, I only have a small piece of advice regarding the two columns.

    To create the two columns in Tailwind and Flexbox, you can use w-6/12 on the picture and figcaption tags. Currently, you have h-6/12 w-full but h-6/12 does not exist, and w-full causes one column to be smaller than the other.

    A simpler way is to use grid layout to create two equal-width columns, use grid grid-cols-2 in the figure tag.

    Happy coding!

    Marked as helpful

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