Testimonials grid section

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size ✔

Screenshot

testimonials-grid-section anteprima testimonials-grid-section anteprima

Links

My process

Built with

  • HTML5
  • CSS
  • Mobile-first workflow
  • Tailwind

What I learned

  • I've learned to use flexbox in combination with grid.

  • I've learned to use Tailwind's @layer components to clean up and organize some of the classes used.

@layer components {
    .card {
      color: theme('colors.white');
      border-radius: theme('borderRadius.lg');
      padding: theme('spacing.8');
      box-shadow: theme('boxShadow.xl');
    }
  }

Continued development

  • I think in the future I'll need to update the font size to make the layout more similar to the original.

Author