Testimonials grid section with Tailwindcss

👾Hello @emanuel-ra, congratulations on your new solution!

I’ve some suggestions for you:

The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <p> with <blockquote> that is tag the describe exactly its content.

This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

✌️ I hope this helps you and happy coding!

Hey @emanuel-ra, some suggestions to improve you code:

• The profile images Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“

• You want reduce the padding/margin and font size of your content in mobile view; it is the same from desktop to mobile.

• I recommend adding a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

• Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.

Here is how it looks like fully implemented: EXAMPLE

Desktop View Code:

.testimonial-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "daniel daniel jonathon kira"
      "jeanette patrick patrick kira";
    gap: 30px;
  }

  .daniel-card {
    grid-area: daniel;
  }
  .jonathan-card {
    grid-area: jonathon;
  }

  .jeanette-card {
    grid-area: jeanette;
  }

  .patrick-card {
    grid-area: patrick;
  }

  .kira-card {
    grid-area: kira;
  }
``


**Happy Coding!** 👻🎃