Submitted 26 days ago

Testimonials Grid: I used ReactJS + TailwindCSS

react, tailwind-css, vite

Aero Flamiano•220

@aflamiano-career

A solution to the Testimonials grid section challenge

Preview Code

Solution retrospective

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

I was able to apply different styles on a looped component!

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

Applying different colors on each card while being looped. There might be a better more elegant way but it works for what it is now. There is no pattern in the repetition of colors currently on the cards. If there was, I got an idea how to tackle something similar in the future from this project.

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

this line specifically: sm:*:not-[*:nth-child(2),*:nth-child(3)]:col-span-2

this worked on selecting the grid items except 2nd and 3rd child but due to it being arbitrary variants, can it be structured in a more tailwindesque way?

Code

Please log in to post a comment

Community feedback

Harsh Kumar•3,430
@thisisharsh7
Posted 26 days ago
Fantastic work on your solution! Your approach to handling the grid with Tailwind CSS is creative, and the site’s polished, modern design is impressive.

Suggestions:
- Tailwind Grid Styling: If you're rendering cards from an array, you can use their index to control which get special grid spans:
Example:
```
{graduates.map((g, i) => (
  <Card
    key={g.id}
    className={i === 0 || i === 3 || i === 4 ? 'sm:col-span-2' : ''}
  >
    {g.name}
  </Card>
))}
```
- Color Assignment: Consider a pattern-based color assignment (e.g., modulo index with colors.length) to make color repetition predictable and maintainable.
- Code Optimization: Move color logic into a utility function to reduce repetition and improve maintainability.
Great job overall—keep experimenting with Tailwind!
Marked as helpful

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