HTML to Webflow examples

Testimonials: 3 cards

3 testimonial cards in a row.

  • Responsive

What you receive in Webflow

  • 19 native elements and 9 classes.
  • Breakpoints: tablet (991px).
  • No Embed elements. Everything is native.

How to paste it

  1. Click Copy for Webflow.
  2. Open your page in the Webflow Designer.
  3. Press ⌘V or Ctrl+V.

HTML

<section class="tst2">
  <div class="tst2-inner">
    <h2 class="tst2-title">Loved by thousands of teams</h2>
    <div class="tst2-grid">
      <div class="tst2-card"><div class="tst2-stars">★★★★★</div><p class="tst2-text">“Setup took ten minutes. It just works.”</p><div class="tst2-name">Marcus Lee</div><div class="tst2-role">Founder, Globex</div></div>
      <div class="tst2-card"><div class="tst2-stars">★★★★★</div><p class="tst2-text">“The support team is unreal. Fast, friendly and they actually fix things.”</p><div class="tst2-name">Priya Patel</div><div class="tst2-role">Ops Lead, Initech</div></div>
      <div class="tst2-card"><div class="tst2-stars">★★★★★</div><p class="tst2-text">“We cut our reporting time from a day to an hour.”</p><div class="tst2-name">Tom Becker</div><div class="tst2-role">CFO, Hooli</div></div>
    </div>
  </div>
</section>
<style>
.tst2 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#f7f8fc; }
.tst2-inner { max-width:1200px; margin:0 auto; }
.tst2-title { font-size:40px; text-align:center; color:#0f172a; margin:0 0 48px; }
.tst2-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.tst2-card { background:#fff; border-radius:16px; padding:28px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.tst2-stars { color:#f5a524; font-size:18px; letter-spacing:2px; margin-bottom:12px; }
.tst2-text { font-size:17px; line-height:1.6; color:#0f172a; margin:0 0 20px; }
.tst2-name { font-weight:700; color:#0f172a; }
.tst2-role { color:#64748b; font-size:14px; }
@media (max-width:991px) { .tst2-grid { grid-template-columns:1fr; } }
</style>