Submitted 3 months ago

Responsive Four Card Feature Section with Tailwindcss

Thiago Lorhan• 110

@Thiagouh

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

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-Dennehy

Posted 2 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

Please log in to post a comment

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