Testimonial Grid Section

This is a solution to the Testimonials grid section challenge on Frontend Mentor.

Requirement

Users should be able to:

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

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Remix - React framework
• Tailwindcss - For styles

Some Code I'm proud of

I made a compound component for testimonial card, so I can use similar styles in the component. Here is how I used it:

<TestimonialCard className="bg-moderate-violet sm:col-span-2">
  <TestimonialCard.Header title="Daniel Clifford" subtitle="Verified Graduate" className="text-white">
    <TestimonialCard.Icon
      src="/images/image-daniel.jpg"
      alt="Daniel Clifford"
      className="border-2 border-light-violet"
    />
  </TestimonialCard.Header>
  <TestimonialCard.Body>
    <TestimonialCard.Title className="mb-10 text-white">
      I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I
      joined. I honestly feel I got every penny’s worth.
    </TestimonialCard.Title>
    <TestimonialCard.Text className="text-light-gray">
      “ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard
      some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun!
      I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since
      completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”
    </TestimonialCard.Text>
  </TestimonialCard.Body>
</TestimonialCard>