Skip to content
Submitted about 2 years ago

Responsive NFT Card Component using Tailwind

Nicholas Anich•150
@NicholasAnich
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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! 👽

Community feedback

  • Amal Karim ✅•1,290
    @amalkarimPosted about 2 years ago

    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
    1
    Nicholas Anich•150
    @NicholasAnichPosted about 2 years ago

    @amalkarim Thanks for the feedback! I put h-screen (full vh) on the main so I could center the component in the middle of the screen haha. Would it have been better to use position in this case? Or should maybe flex-box on the body? I'll work on it! Cheers man!

    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