Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials grid section with tailwindcss

P

@vstm

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I think this went well, it was an easy challenge if you know grids somewhat well.

The only thing that was somewhat cumbersome was that you couldn't use grid-rows-2 of tailwind easily because it would make the rows the same height which is not how the design works.

Also for the cards it would have been better to use components to reuse the styles (and make the use of different card variants/modifiers more explicit), but I deciede to still keep it simple for now.

I also kept it simple for the mobile design, I just used a padding (as per the figma) but allowed the cards to keep growing. The desktop design just uses a max-width for the main section, which is centered. I'm not entirely sure if this is the best way to go.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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