22 Tailwind CSS Feature Sections
12 / 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 Sticky Scroll Feature Section

Scroll storytelling without a library: a sticky left column holds the headline and a progress rail that fills as you read, while four step cards scroll past on the right, each easing into focus. The rail is driven by a named view timeline shared through timeline-scope — all arbitrary properties, gated behind supports-[animation-timeline:view()]:.

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-12 w-full min-h-svh bg-tfs12-bg px-5 py-20 font-tfs12-sans text-tfs12-ink antialiased [timeline-scope:--tfs12] sm:py-28" aria-labelledby="tfs-12-h">
  <div class="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-20">
    <div class="lg:sticky lg:top-12 lg:self-start">
      <div class="grid gap-6">
        <p class="text-sm font-semibold text-tfs12-acc">How Ranger works</p>
        <h2 id="tfs-12-h" class="text-balance font-tfs12-display text-4xl font-bold tracking-tight sm:text-6xl">From signup to first insight in four steps</h2>
        <p class="text-pretty text-lg text-tfs12-mut">No onboarding call, no SDK sprint. Most teams finish before lunch.</p>
        <div aria-hidden="true" class="hidden h-1.5 w-full max-w-xs overflow-hidden rounded-full bg-tfs12-line lg:block"><div class="h-full w-full origin-left scale-x-25 rounded-full bg-tfs12-acc supports-[animation-timeline:view()]:animate-tfs12-rail supports-[animation-timeline:view()]:[animation-timeline:--tfs12] supports-[animation-timeline:view()]:[animation-range:entry_60%_exit_40%]"></div></div>
        <a href="#tfs-12-h" class="group inline-flex min-h-11 w-fit items-center gap-2 rounded-full bg-tfs12-ink px-6 text-sm font-semibold text-white transition hover:bg-tfs12-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs12-acc">Start free <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 transition group-hover:translate-x-0.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </div>
    </div>
    <ol class="grid gap-6 [view-timeline-name:--tfs12]">
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">01</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0V8zM12 18v4"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Connect a source</h3>
        <p class="text-pretty text-tfs12-mut">Paste a read-only warehouse URL or install the Segment destination. Ranger maps your schema in seconds.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-sky-100 text-sky-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Schema mapped · 214 tables</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">02</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Pick a template</h3>
        <p class="text-pretty text-tfs12-mut">Activation, retention or revenue — templates come pre-wired to the events you already send.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-violet-100 text-violet-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Retention template applied</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">03</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Invite the team</h3>
        <p class="text-pretty text-tfs12-mut">Share a live board. Comments thread onto the exact data point they reference.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-amber-100 text-amber-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>6 teammates joined</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">04</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Get the alert</h3>
        <p class="text-pretty text-tfs12-mut">Ranger watches every metric and pings Slack the moment one moves outside its band.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-emerald-100 text-emerald-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Activation ↑ 12% this week</p>
      </li>
    </ol>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs12-bg: #f4f6f1;
  --color-tfs12-bg: oklch(0.97 0.007 124);
  --color-tfs12-ink: #16241b;
  --color-tfs12-ink: oklch(0.244 0.026 156);
  --color-tfs12-mut: #4d5b52;
  --color-tfs12-mut: oklch(0.456 0.023 157);
  --color-tfs12-line: #dde4d9;
  --color-tfs12-line: oklch(0.91 0.017 134);
  --color-tfs12-acc: #16a34a;
  --color-tfs12-acc: oklch(0.627 0.17 149);
  --font-tfs12-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs12-sans: 'Geist', system-ui, sans-serif;
  --animate-tfs12-rail: tfs12-rail linear both;
  --animate-tfs12-focus: tfs12-focus linear both;

  @keyframes tfs12-rail {
    from {
      transform: scaleX(0.04);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes tfs12-focus {
    from {
      opacity: 0.25;
      transform: translateY(40px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}
/* 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-12 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfs-12 * {
    animation: none !important;
  }
}

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-tfs12-bg: #f4f6f1;
  --color-tfs12-bg: oklch(0.97 0.007 124);
  --color-tfs12-ink: #16241b;
  --color-tfs12-ink: oklch(0.244 0.026 156);
  --color-tfs12-mut: #4d5b52;
  --color-tfs12-mut: oklch(0.456 0.023 157);
  --color-tfs12-line: #dde4d9;
  --color-tfs12-line: oklch(0.91 0.017 134);
  --color-tfs12-acc: #16a34a;
  --color-tfs12-acc: oklch(0.627 0.17 149);
  --font-tfs12-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs12-sans: 'Geist', system-ui, sans-serif;
  --animate-tfs12-rail: tfs12-rail linear both;
  --animate-tfs12-focus: tfs12-focus linear both;

  @keyframes tfs12-rail {
    from {
      transform: scaleX(0.04);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes tfs12-focus {
    from {
      opacity: 0.25;
      transform: translateY(40px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}
/* 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-12 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfs-12 * {
    animation: none !important;
  }
}
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=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Geist:wght@400..700&display=swap">

What changed in the port

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

  • The CSS original's @supports (animation-timeline: view()) block became supports-[animation-timeline:view()]: variants on the exact elements that animate.
  • UI upgrade from the CSS original: a progress rail in the sticky column fills as you read the steps, using a named view timeline shared via timeline-scope.
  • UI upgrade: each step closes on a concrete outcome chip ("214 tables mapped") so the story shows progress, not just instructions.
  • UI upgrade: the sticky column now carries the CTA, so it's always one click away while reading.
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 Sticky Scroll Feature Section
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-sticky-scroll-feature-section/

Scroll storytelling without a library: a sticky left column holds the headline and a progress rail that fills as you read, while four step cards scroll past on the right, each easing into focus. The rail is driven by a named view timeline shared through timeline-scope — all arbitrary properties, gated behind supports-[animation-timeline:view()]:.
## HTML
```html
<section class="tfs-12 w-full min-h-svh bg-tfs12-bg px-5 py-20 font-tfs12-sans text-tfs12-ink antialiased [timeline-scope:--tfs12] sm:py-28" aria-labelledby="tfs-12-h">
  <div class="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-20">
    <div class="lg:sticky lg:top-12 lg:self-start">
      <div class="grid gap-6">
        <p class="text-sm font-semibold text-tfs12-acc">How Ranger works</p>
        <h2 id="tfs-12-h" class="text-balance font-tfs12-display text-4xl font-bold tracking-tight sm:text-6xl">From signup to first insight in four steps</h2>
        <p class="text-pretty text-lg text-tfs12-mut">No onboarding call, no SDK sprint. Most teams finish before lunch.</p>
        <div aria-hidden="true" class="hidden h-1.5 w-full max-w-xs overflow-hidden rounded-full bg-tfs12-line lg:block"><div class="h-full w-full origin-left scale-x-25 rounded-full bg-tfs12-acc supports-[animation-timeline:view()]:animate-tfs12-rail supports-[animation-timeline:view()]:[animation-timeline:--tfs12] supports-[animation-timeline:view()]:[animation-range:entry_60%_exit_40%]"></div></div>
        <a href="#tfs-12-h" class="group inline-flex min-h-11 w-fit items-center gap-2 rounded-full bg-tfs12-ink px-6 text-sm font-semibold text-white transition hover:bg-tfs12-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs12-acc">Start free <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 transition group-hover:translate-x-0.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </div>
    </div>
    <ol class="grid gap-6 [view-timeline-name:--tfs12]">
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">01</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0V8zM12 18v4"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Connect a source</h3>
        <p class="text-pretty text-tfs12-mut">Paste a read-only warehouse URL or install the Segment destination. Ranger maps your schema in seconds.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-sky-100 text-sky-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Schema mapped · 214 tables</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">02</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Pick a template</h3>
        <p class="text-pretty text-tfs12-mut">Activation, retention or revenue — templates come pre-wired to the events you already send.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-violet-100 text-violet-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Retention template applied</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">03</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Invite the team</h3>
        <p class="text-pretty text-tfs12-mut">Share a live board. Comments thread onto the exact data point they reference.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-amber-100 text-amber-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>6 teammates joined</p>
      </li>
      <li class="grid gap-5 rounded-3xl bg-white p-7 shadow-[0_20px_50px_-30px_rgb(20_40_30/0.3)] ring-1 ring-tfs12-line supports-[animation-timeline:view()]:animate-tfs12-focus supports-[animation-timeline:view()]:[animation-timeline:view()] supports-[animation-timeline:view()]:[animation-range:entry_10%_cover_40%] motion-reduce:animate-none sm:p-9">
        <div class="flex items-center gap-4"><span class="font-tfs12-display text-5xl font-bold text-tfs12-line">04</span><span class="grid size-11 place-items-center rounded-2xl bg-tfs12-acc/10 text-tfs12-acc"><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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg></span></div>
        <h3 class="font-tfs12-display text-2xl font-semibold">Get the alert</h3>
        <p class="text-pretty text-tfs12-mut">Ranger watches every metric and pings Slack the moment one moves outside its band.</p>
        <p class="inline-flex w-fit items-center gap-2 rounded-full bg-emerald-100 text-emerald-800 px-3 py-1.5 text-sm font-medium"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5"/></svg>Activation ↑ 12% this week</p>
      </li>
    </ol>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs12-bg: #f4f6f1;
  --color-tfs12-bg: oklch(0.97 0.007 124);
  --color-tfs12-ink: #16241b;
  --color-tfs12-ink: oklch(0.244 0.026 156);
  --color-tfs12-mut: #4d5b52;
  --color-tfs12-mut: oklch(0.456 0.023 157);
  --color-tfs12-line: #dde4d9;
  --color-tfs12-line: oklch(0.91 0.017 134);
  --color-tfs12-acc: #16a34a;
  --color-tfs12-acc: oklch(0.627 0.17 149);
  --font-tfs12-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs12-sans: 'Geist', system-ui, sans-serif;
  --animate-tfs12-rail: tfs12-rail linear both;
  --animate-tfs12-focus: tfs12-focus linear both;

  @keyframes tfs12-rail {
    from {
      transform: scaleX(0.04);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes tfs12-focus {
    from {
      opacity: 0.25;
      transform: translateY(40px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}
/* 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-12 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfs-12 * {
    animation: none !important;
  }
}
```

How this works

A timeline shared across siblings. The step list names a view timeline (--tfs12); the section declares timeline-scope so the progress rail — which sits in the other column — can use it. The rail scales from 0 to 1 as the list crosses the viewport.

Each card reveals itself. Cards run animate-tfs12-focus on their own anonymous view() timeline between entry 10% and cover 40%, fading and lifting into place. Bounded inside the section — nothing pins the viewport.

Make it yours

  • Add a step: copy one <li> — the rail rescales automatically.
  • Change reveal timing with the [animation-range:…] utility.
  • Pin the visual instead of the headline by moving lg:sticky.

Gotchas — read before shipping

  • Scroll-driven animations are Chromium 115+ and Safari 26; Firefox shows the static state.
  • Sticky fails if any ancestor has overflow:hidden — keep the section overflow visible.
  • timeline-scope must sit on a common ancestor of the timeline and its consumer.

Browser support

ChromeSafariFirefoxEdge
115+26+128+115+

Scroll-driven motion is progressive; sticky layout works everywhere in Tailwind v4's range.

Techniques used in this demo

Plain CSSno Tailwind surface

scroll driven animationstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →