Tailwind CSS - NFT Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Joaquin, congratulations for your new solution!

  🎉 Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

  1.Give the correct container size, your card is a bit too big due the width with percentage values that will vary depending of the screen. Correct value --> max-width: 320px;

  @media (min-width: 768px)
  .md\:w-1\/3 {
      max-width: 320px;
  }
  

  2.You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .flex {
      display: flex;
      flex-direction: column;
  }
  }
  

  3.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  👾My rating for this solution: ⭐⭐⭐⭐⭐

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1