22 Tailwind CSS Feature Sections
11 / 22

All 22 in 22 Tailwind CSS Feature Sections

  1. 01Tailwind Tabbed Product Tour Feature Section
  2. 02Tailwind Alternating Feature Rows with Images
  3. 03Tailwind Feature Section with Stat Counters
  4. 04Tailwind Problem vs Solution Feature Section
  5. 05Tailwind Feature Section with Product Video
  6. 06Tailwind Integrations Logo Grid Section
  7. 07Tailwind Accordion Feature Cards Section
  8. 08Tailwind Plan Feature Comparison Columns
  9. 09Tailwind Security Compliance Badges Section
  10. 10Tailwind API Feature Section with Code
  11. 11Tailwind Feature Rows with Customer Quotes
  12. 12Tailwind Sticky Scroll Feature Section
  13. 13Tailwind Feature Section Icon Grid
  14. 14Tailwind Bento Grid Feature Section
  15. 15Tailwind Dark Glassmorphism Feature Section
  16. 16Tailwind Feature Cards with Scroll Reveal
  17. 17Tailwind Feature Section with Code Snippet
  18. 18Tailwind Feature Comparison Table Section
  19. 19Tailwind SaaS Features Section Grid
  20. 20Tailwind 3D Tilt Feature Cards Section
  21. 21Tailwind Feature Section with Phone Mockup
  22. 22Tailwind Vertical Timeline Feature Section
Pure TailwindMIT licensed

Tailwind Feature Rows with Customer Quotes

Every feature claim backed by a customer: three feature cards, each closing on a short quote, a named person and the metric they saw. Cards use grid-rows-subgrid so titles, descriptions and quotes line up across the row regardless of copy length.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tfs-11 w-full min-h-svh bg-tfs11-bg px-5 py-20 font-tfs11-sans text-tfs11-ink antialiased sm:py-28" aria-labelledby="tfs-11-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="grid gap-4 lg:grid-cols-2 lg:items-end">
      <h2 id="tfs-11-h" class="text-balance font-tfs11-serif text-5xl leading-[1.05] sm:text-6xl">Features our customers <em class="text-tfs11-acc">actually</em> talk about</h2>
      <p class="max-w-md text-pretty text-lg text-tfs11-mut lg:justify-self-end">Every claim below comes with the team that measured it.</p>
    </header>
    <div class="grid gap-6 lg:grid-cols-3">
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span><h3 class="text-xl font-semibold">Instant search</h3></div>
        <p class="text-pretty text-tfs11-mut">Find any message, file or decision across every workspace in under 50 ms.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“We stopped asking “where did we decide that?” Search just answers it.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-amber-200 text-amber-900 text-xs font-bold">AC</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Alex Chen</strong><span class="text-tfs11-mut">Eng Lead, Orbit</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">4× faster lookups</span></figcaption>
        </figure>
      </article>
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M3 3h6v6H3zM15 15h6v6h-6zM6 9v3a3 3 0 0 0 3 3h6"/></svg></span><h3 class="text-xl font-semibold">Automated handoffs</h3></div>
        <p class="text-pretty text-tfs11-mut">Tickets route themselves to the right owner based on code ownership and on-call.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“Our handoff backlog went from forty tickets to zero in a fortnight.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-rose-200 text-rose-900 text-xs font-bold">PS</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Priya Sharma</strong><span class="text-tfs11-mut">Head of Support, Vale</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">−92% backlog</span></figcaption>
        </figure>
      </article>
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M3 3v18h18M7 15l4-4 3 3 5-6"/></svg></span><h3 class="text-xl font-semibold">Usage insights</h3></div>
        <p class="text-pretty text-tfs11-mut">See which features each account uses, and which ones are quietly churning.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“We caught three at-risk enterprise renewals a full quarter early.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-emerald-200 text-emerald-900 text-xs font-bold">JL</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Jordan Lee</strong><span class="text-tfs11-mut">VP Customer Success, Talon</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">$1.2M saved</span></figcaption>
        </figure>
      </article>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs11-bg: #f7f1ea;
  --color-tfs11-bg: oklch(0.961 0.011 72);
  --color-tfs11-ink: #2a1d14;
  --color-tfs11-ink: oklch(0.244 0.026 56);
  --color-tfs11-mut: #5f5046;
  --color-tfs11-mut: oklch(0.443 0.026 56);
  --color-tfs11-line: #ebe1d6;
  --color-tfs11-line: oklch(0.915 0.018 70);
  --color-tfs11-acc: #b45309;
  --color-tfs11-acc: oklch(0.555 0.146 49);
  --font-tfs11-serif: 'Instrument Serif', Georgia, serif;
  --font-tfs11-sans: 'DM Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-11 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tfs11-bg: #f7f1ea;
  --color-tfs11-bg: oklch(0.961 0.011 72);
  --color-tfs11-ink: #2a1d14;
  --color-tfs11-ink: oklch(0.244 0.026 56);
  --color-tfs11-mut: #5f5046;
  --color-tfs11-mut: oklch(0.443 0.026 56);
  --color-tfs11-line: #ebe1d6;
  --color-tfs11-line: oklch(0.915 0.018 70);
  --color-tfs11-acc: #b45309;
  --color-tfs11-acc: oklch(0.555 0.146 49);
  --font-tfs11-serif: 'Instrument Serif', Georgia, serif;
  --font-tfs11-sans: 'DM Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-11 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400..700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The CSS original's per-card flex columns with margin-top:auto became grid-rows-subgrid, aligning titles, bodies and quotes across all three cards.
  • UI upgrade from the CSS original: each quote now carries a metric badge (4× faster, −92% backlog, $1.2M saved) — proof as a number.
  • UI upgrade: quotes use Instrument Serif against a DM Sans claim, giving the customer a distinct voice.
  • UI upgrade: quotes are proper <figure>/<figcaption> structures; the original used bare paragraphs.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Feature Rows with Customer Quotes
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-feature-rows-with-customer-quotes/

Every feature claim backed by a customer: three feature cards, each closing on a short quote, a named person and the metric they saw. Cards use grid-rows-subgrid so titles, descriptions and quotes line up across the row regardless of copy length.
## HTML
```html
<section class="tfs-11 w-full min-h-svh bg-tfs11-bg px-5 py-20 font-tfs11-sans text-tfs11-ink antialiased sm:py-28" aria-labelledby="tfs-11-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="grid gap-4 lg:grid-cols-2 lg:items-end">
      <h2 id="tfs-11-h" class="text-balance font-tfs11-serif text-5xl leading-[1.05] sm:text-6xl">Features our customers <em class="text-tfs11-acc">actually</em> talk about</h2>
      <p class="max-w-md text-pretty text-lg text-tfs11-mut lg:justify-self-end">Every claim below comes with the team that measured it.</p>
    </header>
    <div class="grid gap-6 lg:grid-cols-3">
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span><h3 class="text-xl font-semibold">Instant search</h3></div>
        <p class="text-pretty text-tfs11-mut">Find any message, file or decision across every workspace in under 50 ms.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“We stopped asking “where did we decide that?” Search just answers it.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-amber-200 text-amber-900 text-xs font-bold">AC</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Alex Chen</strong><span class="text-tfs11-mut">Eng Lead, Orbit</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">4× faster lookups</span></figcaption>
        </figure>
      </article>
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M3 3h6v6H3zM15 15h6v6h-6zM6 9v3a3 3 0 0 0 3 3h6"/></svg></span><h3 class="text-xl font-semibold">Automated handoffs</h3></div>
        <p class="text-pretty text-tfs11-mut">Tickets route themselves to the right owner based on code ownership and on-call.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“Our handoff backlog went from forty tickets to zero in a fortnight.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-rose-200 text-rose-900 text-xs font-bold">PS</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Priya Sharma</strong><span class="text-tfs11-mut">Head of Support, Vale</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">−92% backlog</span></figcaption>
        </figure>
      </article>
      <article class="grid gap-6 rounded-[1.75rem] bg-white p-7 shadow-[0_1px_0_rgb(0_0_0/0.04),0_20px_50px_-30px_rgb(68_40_20/0.35)] ring-1 ring-tfs11-line lg:row-span-3 lg:grid-rows-subgrid">
        <div class="flex items-center gap-3"><span class="grid size-10 place-items-center rounded-full bg-tfs11-ink text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M3 3v18h18M7 15l4-4 3 3 5-6"/></svg></span><h3 class="text-xl font-semibold">Usage insights</h3></div>
        <p class="text-pretty text-tfs11-mut">See which features each account uses, and which ones are quietly churning.</p>
        <figure class="grid content-start gap-4 rounded-2xl bg-tfs11-bg p-5">
          <blockquote class="font-tfs11-serif text-xl leading-snug text-pretty">“We caught three at-risk enterprise renewals a full quarter early.”</blockquote>
          <figcaption class="flex flex-wrap items-center gap-3 text-sm"><span class="grid size-10 place-items-center rounded-full bg-emerald-200 text-emerald-900 text-xs font-bold">JL</span><span class="min-w-0 flex-1"><strong class="block font-semibold">Jordan Lee</strong><span class="text-tfs11-mut">VP Customer Success, Talon</span></span><span class="rounded-full bg-tfs11-acc px-2.5 py-1 text-xs font-semibold text-white">$1.2M saved</span></figcaption>
        </figure>
      </article>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs11-bg: #f7f1ea;
  --color-tfs11-bg: oklch(0.961 0.011 72);
  --color-tfs11-ink: #2a1d14;
  --color-tfs11-ink: oklch(0.244 0.026 56);
  --color-tfs11-mut: #5f5046;
  --color-tfs11-mut: oklch(0.443 0.026 56);
  --color-tfs11-line: #ebe1d6;
  --color-tfs11-line: oklch(0.915 0.018 70);
  --color-tfs11-acc: #b45309;
  --color-tfs11-acc: oklch(0.555 0.146 49);
  --font-tfs11-serif: 'Instrument Serif', Georgia, serif;
  --font-tfs11-sans: 'DM Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-11 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Proof sits under the claim it proves. Rather than a separate testimonial wall, each card ends with the customer whose result matches that feature — the strongest form of social proof on a feature page.

Subgrid keeps the row tidy. The three cards share three row tracks; a longer description in one card pushes all quotes down together.

Make it yours

  • Use real headshots: replace the initials disc with an <img class="size-10 rounded-full">.
  • Change the metric colour via --color-tfs11-acc.
  • Drop to two columns by changing lg:grid-cols-3.

Gotchas — read before shipping

  • Get written permission for every named quote and metric.
  • Keep attribution outside <blockquote>, in <figcaption>.
  • Each card must keep exactly three direct children for subgrid alignment.

Browser support

ChromeSafariFirefoxEdge
117+16.4+128+117+

Subgrid alignment from Chrome 117; earlier engines show unaligned but complete cards.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →