Open demo

CSS code

HTML 
<div class="tc-grid">
  <figure class="tc-card">
    <p class="tc-stars" role="img" aria-label="Rated 5 out of 5">★★★★★</p>
    <blockquote class="tc-quote"><p>Switched our whole checkout flow over in an afternoon. Support answered in minutes, not days — and conversion is up nine percent since.</p></blockquote>
    <figcaption class="tc-who">
      <span class="tc-av tc-v1" aria-hidden="true">JW</span>
      <span><b class="tc-name">Jordan Wells</b><span class="tc-role">Head of Growth, Arcadia</span></span>
      <span class="tc-logo" aria-hidden="true">Arcadia</span>
    </figcaption>
  </figure>
  <figure class="tc-card">
    <p class="tc-stars" role="img" aria-label="Rated 5 out of 5">★★★★★</p>
    <blockquote class="tc-quote"><p>The first tool the finance team and the engineers both actually like. Reports that took a week now close themselves out overnight.</p></blockquote>
    <figcaption class="tc-who">
      <span class="tc-av tc-v2" aria-hidden="true">AO</span>
      <span><b class="tc-name">Amara Obi</b><span class="tc-role">CFO, Fieldnote</span></span>
      <span class="tc-logo" aria-hidden="true">Fieldnote</span>
    </figcaption>
  </figure>
</div>
CSS 
/* Testimonial cards: figure > blockquote + figcaption, a star rating and a large decorative quote mark (::before). */
.tc-grid,.tc-grid *,.tc-grid *::before,.tc-grid *::after{box-sizing:border-box}
.tc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.tc-card{width:330px;margin:0;background:#fff;border-radius:18px;padding:30px 28px;position:relative;box-shadow:0 1px 2px rgba(60,42,20,.05),0 18px 40px -16px rgba(60,42,20,.14)}
.tc-card::before{content:"“";content:"“"/"";position:absolute;top:6px;left:20px;font-size:5.5rem;line-height:1;font-family:Georgia,serif;color:#f1e5d6}
.tc-stars{position:relative;color:#f59e0b;font-size:.95rem;letter-spacing:2px;margin:0 0 14px}
.tc-quote{position:relative;font-size:.96rem;line-height:1.65;color:#3d3227;margin:0 0 22px}
.tc-quote p{margin:0}
.tc-who{display:flex;align-items:center;gap:13px;border-top:1px solid #f3ece1;padding-top:18px}
.tc-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none}
.tc-v1{background:linear-gradient(135deg,#d97706,#dc2626)}
.tc-v2{background:linear-gradient(135deg,#0891b2,#2563eb)}
.tc-name{display:block;font-size:.9rem;color:#231b12}
.tc-role{font-size:.78rem;color:#75685d}
.tc-logo{margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#827363}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row row-cols-auto justify-content-center g-4">
  <div class="col">
    <figure class="card h-100 tc-card">
      <div class="card-body">
        <p class="tc-stars" role="img" aria-label="Rated 5 out of 5">★★★★★</p>
        <blockquote class="blockquote tc-quote"><p class="mb-0">Switched our whole checkout flow over in an afternoon. Support answered in minutes, not days — and conversion is up nine percent since.</p></blockquote>
        <figcaption class="tc-who d-flex align-items-center">
          <span class="tc-av tc-v1 rounded-circle d-flex align-items-center justify-content-center text-white" aria-hidden="true">JW</span>
          <span><b class="tc-name">Jordan Wells</b><span class="tc-role">Head of Growth, Arcadia</span></span>
          <span class="tc-logo ms-auto" aria-hidden="true">Arcadia</span>
        </figcaption>
      </div>
    </figure>
  </div>
  <div class="col">
    <figure class="card h-100 tc-card">
      <div class="card-body">
        <p class="tc-stars" role="img" aria-label="Rated 5 out of 5">★★★★★</p>
        <blockquote class="blockquote tc-quote"><p class="mb-0">The first tool the finance team and the engineers both actually like. Reports that took a week now close themselves out overnight.</p></blockquote>
        <figcaption class="tc-who d-flex align-items-center">
          <span class="tc-av tc-v2 rounded-circle d-flex align-items-center justify-content-center text-white" aria-hidden="true">AO</span>
          <span><b class="tc-name">Amara Obi</b><span class="tc-role">CFO, Fieldnote</span></span>
          <span class="tc-logo ms-auto" aria-hidden="true">Fieldnote</span>
        </figcaption>
      </div>
    </figure>
  </div>
</div>
CSS 
/* Bootstrap .card as a figure with .blockquote and a figcaption, restyled through --bs-card-* variables.
   The large quote mark is a decorative ::before. */
.tc-card{--bs-card-border-width:0;--bs-card-border-radius:18px;--bs-card-spacer-x:28px;--bs-card-spacer-y:30px;width:330px;margin:0;
  box-shadow:0 1px 2px rgba(60,42,20,.05),0 18px 40px -16px rgba(60,42,20,.14)}
.tc-card::before{content:"“";content:"“"/"";position:absolute;top:6px;left:20px;font-size:5.5rem;line-height:1;font-family:Georgia,serif;color:#f1e5d6}
.tc-stars{position:relative;color:#f59e0b;font-size:.95rem;letter-spacing:2px;margin:0 0 14px}
.tc-quote{position:relative;font-size:.96rem;line-height:1.65;color:#3d3227;margin:0 0 22px}
.tc-who{gap:13px;border-top:1px solid #f3ece1;padding-top:18px}
.tc-av{width:44px;height:44px;font-weight:800;flex:none}
.tc-v1{background:linear-gradient(135deg,#d97706,#dc2626)}
.tc-v2{background:linear-gradient(135deg,#0891b2,#2563eb)}
.tc-name{display:block;font-size:.9rem;color:#231b12}
.tc-role{font-size:.78rem;color:#75685d}
.tc-logo{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#827363}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-wrap justify-center gap-[26px]">
  <figure class="relative w-[330px] rounded-[18px] bg-white px-7 py-[30px] shadow-[0_1px_2px_rgba(60,42,20,.05),0_18px_40px_-16px_rgba(60,42,20,.14)] before:absolute before:top-1.5 before:left-5 before:font-[Georgia,serif] before:text-[5.5rem] before:leading-none before:text-[#f1e5d6] before:content-['“'] before:[content:'“'_/_'']">
    <p role="img" aria-label="Rated 5 out of 5" class="relative mb-3.5 text-[.95rem] tracking-[2px] text-[#f59e0b]">★★★★★</p>
    <blockquote class="relative mb-[22px] text-[.96rem] leading-[1.65] text-[#3d3227]"><p>Switched our whole checkout flow over in an afternoon. Support answered in minutes, not days — and conversion is up nine percent since.</p></blockquote>
    <figcaption class="flex items-center gap-[13px] border-t border-[#f3ece1] pt-[18px]">
      <span aria-hidden="true" class="flex size-11 flex-none items-center justify-center rounded-full bg-linear-135 from-[#d97706] to-[#dc2626] font-extrabold text-white">JW</span>
      <span><b class="block text-[.9rem] text-[#231b12]">Jordan Wells</b><span class="text-[.78rem] text-[#75685d]">Head of Growth, Arcadia</span></span>
      <span aria-hidden="true" class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-[#827363] uppercase">Arcadia</span>
    </figcaption>
  </figure>
  <figure class="relative w-[330px] rounded-[18px] bg-white px-7 py-[30px] shadow-[0_1px_2px_rgba(60,42,20,.05),0_18px_40px_-16px_rgba(60,42,20,.14)] before:absolute before:top-1.5 before:left-5 before:font-[Georgia,serif] before:text-[5.5rem] before:leading-none before:text-[#f1e5d6] before:content-['“'] before:[content:'“'_/_'']">
    <p role="img" aria-label="Rated 5 out of 5" class="relative mb-3.5 text-[.95rem] tracking-[2px] text-[#f59e0b]">★★★★★</p>
    <blockquote class="relative mb-[22px] text-[.96rem] leading-[1.65] text-[#3d3227]"><p>The first tool the finance team and the engineers both actually like. Reports that took a week now close themselves out overnight.</p></blockquote>
    <figcaption class="flex items-center gap-[13px] border-t border-[#f3ece1] pt-[18px]">
      <span aria-hidden="true" class="flex size-11 flex-none items-center justify-center rounded-full bg-linear-135 from-[#0891b2] to-[#2563eb] font-extrabold text-white">AO</span>
      <span><b class="block text-[.9rem] text-[#231b12]">Amara Obi</b><span class="text-[.78rem] text-[#75685d]">CFO, Fieldnote</span></span>
      <span aria-hidden="true" class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-[#827363] uppercase">Fieldnote</span>
    </figcaption>
  </figure>
</div>

About this set

Customer quote cards on a warm cream page. Each card has a five-star rating, the quotation, and a footer with a gradient initials avatar, the customer’s name and job title, and the company name set as a small spaced-out wordmark. A large Georgia opening quote mark sits faintly behind the rating as decoration. The markup is the pattern HTML intends for quotes with attribution: a figure containing a blockquote and a figcaption, so the quote and the person who said it stay tied together. The quote mark is a ::before glyph with empty alt text, the stars are a single role=”img” labelled Rated 5 out of 5, and the avatar initials and wordmark are hidden from screen readers because the name and company are already in the caption. Use these on landing pages, pricing pages or case study sections; put several in a row or a slider. Replace the wordmark span with the client’s logo image when you have one. There is no JavaScript and no hover effect. The Bootstrap version is a .card with .blockquote, and the Tailwind version draws the quote mark with before: utilities.

What’s included

  • figure, blockquote and figcaption markup for the quote and attribution
  • Star rating announced as Rated 5 out of 5
  • Decorative quote mark with empty alt text
  • Initials avatar, name, job title and company wordmark
  • No JavaScript

Accessibility

Each testimonial is a figure whose blockquote is captioned by the person's name and title. The stars are one image with the label Rated 5 out of 5, while the decorative quote mark, initials and repeated company wordmark are hidden from assistive technology. The job title and wordmark colours were darkened to reach 4.5:1 on white.

Customise it

Change the avatar gradients in .tc-v1 and .tc-v2, the quote mark colour in .tc-card::before and the star colour in .tc-stars. In Bootstrap the card surface and radius are --bs-card-* variables on .tc-card; in Tailwind edit the before:text- and from-/to- utilities.