Skip to content
Submitted 5 months ago

Responsive Four Card Feature Section with Tailwindcss

Thiago Lorhan•110
@Thiagouh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

for having managed to solve the problem of distributing the location of cards using Grid. I will continue using it for future challenges.

What challenges did you encounter, and how did you overcome them?

aiming for desktop design, I separated the middle cards into a section with a grid that can distribute the 2 cards in this column, while the others have only 1 card.

What specific areas of your project would you like help with?

any feedback for the solution is welcome!

Community feedback

  • Stephanie Dennehy•220
    @Stephanie-DennehyPosted 4 months ago

    HI Thiago,

    Nice job with this challenge! I was thinking about completing this challenege using grid, but I opted for flexbox instead. The way you used grid and made the separate columns works really well and I enjoyed looking at your solution.

    The only suggestion I have is to try to go back and combine some of the styles that are reused a lot (on the cards for example) into a custom class. Then you can apply all of the styles with one class to keep the HTML cleaner.

    Here's a link in the Tailwind documentation to show you what I am referring to. https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

    -Stephanie

    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