Skip to content
Submitted 9 months ago

Product Preview card components using Tailwind

Karan Sharma•350
@karan819381
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

i don't understad. HOw to make this mobile responsive using tailwind. its my first project using tailwind. Any suggestion to improve. plz comment. Thank you

Community feedback

  • Myk Escala•620
    @MikoyzskiePosted 9 months ago

    Hey Karan!

    • First of, clean code. Very organized.
    • In Tailwindcss, we use the classnames sm,md,lg, and xl for viewport widths or device widths
    • For example, if you want your flex-direction to be row on larger screens and column on smaller screens, you use "flex-col md:flex-row"
    • Since sm: / md: / lg: and so on is min-width not max-width
    • Hope this helps

    https://tailwindcss.com/docs/responsive-design#working-mobile-first

    Marked as helpful
    1

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