3 column preview card using Tailwind CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Wrap the page's whole main content in the <main> tag.

  • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

  • You shouldn't have a fixed height like h-96; if the content grows, its elements will overflow. This is what happens when resizing the page. Also, avoid using percentage widths; instead, use max-width (max-w-[900px]) to allow the element to resize, providing better control over its width.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @cocotiwak!

  Your project looks great!

  Since you asked for feedback, I have a few tips for you to improve your project:

  • The button Learn More borders are a bit more curvy, like, rounded. Since you used Tailwind on this project, you may wanna add rounded-full to them.

  • Still about borders, your main container only has curvy edges on mobile version, so you can add those same properties to its desktop version too.

  • Lastly, if you change the body background-color to #F2F2F2, it'll look even closer to the original design.

  Other than those little details, you did an excelent job!

  0