JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<section class="testimonials">

          <div class="testimonials-title">
            <h2 class="section-title">Testimonials</h2>
          </div>
          <div class="testimonials-desc">
            <img class="testimonials-icons" src="img/testimonials-icons.svg" alt="testimonials">
            <p class="section-info">“Quisque in lacus a urna fermentum euismod. Integer mi nibh, dapibus ac scelerisque eu, facilisis quis purus. Morbi blandit sit amet turpis nec”</p>
          </div>
          <div class="testimonials-hero">
            <h4 class="testimonials-hero-name">Edward Newgate</h4>
            <small class="testimonials-hero-desc">Founder Circle</small>
          </div>
        </div>


          <div class="testimonials-cards">
            <div class="testimonials-card">
              <img src="img/hero-img.png" alt="card">
            </div>
          </div>

    </section>

CSS

.testimonials-title {
  margin-bottom: 145px;
}

.testimonials-desc {
  max-width: 450px;
  margin-bottom: 40px;
}

.testimonials-icons {
  margin-bottom: 30px;
}

.testimonials-hero-name {
  font-weight: bold;
  font-size: 22px;
  color: #000;
  margin-bottom: 10px;
}

.testimonials-hero-desc {
  font-weight: normal;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  mix-blend-mode: normal;
}