Skip to content
Submitted almost 3 years ago

Responsive NFT Card Component using Tailwind

tailwind-css
Nicholas Anich•150
@NicholasAnich
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

🍃 Hey Everyone!

This was an excellent challenge to learn and try out Tailwind! It was definitely a rough start and a lot of yelling at the computer but glad I pushed through. I can see why people like to use the Tailwind CSS framework.

Please feel free to leave any comment or suggestion on how to go about improving my code.

Thanks! 👽

Code

Please log in to post a comment

Log in

Community feedback

  • Amal Karim ✅•1,290
    @amalkarim

    Hi Nicholas, great job on completing this challenge.

    I never used Tailwind though, so I couldn't really give you suggestion about that. I think your code is great. The only thing that I found could be improved is the height of the <main> element. When the page is viewed using a mobile phone in a landscape mode (i.e. the height of the browser is shorter than the content), some parts of the card in invisible, and we can't scroll to see it. To avoid that, you can simply remove the class h-screen from the <main>. Also, try to give the body some padding to give a nice breathing room for the card.

    Hope this helps

    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