22 Tailwind CSS Feature Sections
22 / 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 Vertical Timeline Feature Section

A vertical timeline of four milestones: a single rail on phones, an alternating two-sided layout from md: up, with the centre line filling as you scroll (scroll-driven, progressive). Alternation is one variant on the list item — md:even:[&>article]:col-start-3 — not separate left/right markup.

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-22 w-full min-h-svh bg-tfs22-bg px-5 py-20 font-tfs22-sans text-white antialiased sm:py-28" aria-labelledby="tfs-22-h">
  <div class="mx-auto grid w-full max-w-5xl gap-16">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-semibold text-tfs22-acc">Your first 30 days</p>
      <h2 id="tfs-22-h" class="text-balance font-tfs22-display text-4xl font-bold tracking-tight sm:text-6xl">From kickoff to fully live</h2>
    </header>
    <div class="relative [view-timeline-name:--tfs22]">
    <div aria-hidden="true" class="absolute bottom-0 left-5 top-0 w-0.5 overflow-hidden rounded-full bg-white/10 md:left-1/2 md:-translate-x-1/2"><span class="block size-full origin-top bg-linear-to-b from-tfs22-acc to-tfs22-acc2 supports-[animation-timeline:view()]:animate-tfs22-fill supports-[animation-timeline:view()]:[animation-timeline:--tfs22] supports-[animation-timeline:view()]:[animation-range:entry_50%_exit_50%] motion-reduce:animate-none"></span></div>
    <ol class="grid gap-10">
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="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>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-01" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 1</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Kickoff call</h3>
          <p class="text-pretty text-tfs22-mut">Meet your solutions engineer and map your current workflows.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="M12 8c5 0 9-1.3 9-3s-4-3-9-3-9 1.3-9 3 4 3 9 3zM3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></svg></span>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-03" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 3</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Data connected</h3>
          <p class="text-pretty text-tfs22-mut">Warehouse and CRM synced; historical data backfilled overnight.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="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>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-14" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 14</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Team onboarded</h3>
          <p class="text-pretty text-tfs22-mut">Role-based training for admins, managers and reps.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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></span>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-30" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 30</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Fully live</h3>
          <p class="text-pretty text-tfs22-mut">First automated report lands in every inbox. Success review booked.</p>
        </article>
      </li>
    </ol>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs22-bg: #0b0f1a;
  --color-tfs22-bg: oklch(0.17 0.024 268);
  --color-tfs22-card: #121829;
  --color-tfs22-card: oklch(0.212 0.035 269);
  --color-tfs22-mut: #a9b2c7;
  --color-tfs22-mut: oklch(0.763 0.032 267);
  --color-tfs22-acc: #fb923c;
  --color-tfs22-acc: oklch(0.758 0.159 56);
  --color-tfs22-acc2: #f43f5e;
  --color-tfs22-acc2: oklch(0.645 0.215 16);
  --font-tfs22-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs22-sans: 'DM Sans', system-ui, sans-serif;
  --animate-tfs22-fill: tfs22-fill linear both;

  @keyframes tfs22-fill {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }
}
/* 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-22 {
  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-tfs22-bg: #0b0f1a;
  --color-tfs22-bg: oklch(0.17 0.024 268);
  --color-tfs22-card: #121829;
  --color-tfs22-card: oklch(0.212 0.035 269);
  --color-tfs22-mut: #a9b2c7;
  --color-tfs22-mut: oklch(0.763 0.032 267);
  --color-tfs22-acc: #fb923c;
  --color-tfs22-acc: oklch(0.758 0.159 56);
  --color-tfs22-acc2: #f43f5e;
  --color-tfs22-acc2: oklch(0.645 0.215 16);
  --font-tfs22-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs22-sans: 'DM Sans', system-ui, sans-serif;
  --animate-tfs22-fill: tfs22-fill linear both;

  @keyframes tfs22-fill {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }
}
/* 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-22 {
  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=Bricolage+Grotesque:opsz,wght@12..96,400..800&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 .item:nth-child(even) .card { grid-column: 3 } became the variant md:even:[&>article]:col-start-3 on each list item.
  • UI upgrade from the CSS original: the centre rail fills as you scroll (progressive scroll-driven animation), making progress through the timeline visible.
  • UI upgrade: each milestone has an icon dot punched through the rail with ring-8, and real <time datetime> values.
  • UI upgrade: on phones the timeline collapses to a single left rail instead of squeezing two columns.
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 Vertical Timeline Feature Section
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-vertical-timeline-feature-section/

A vertical timeline of four milestones: a single rail on phones, an alternating two-sided layout from md: up, with the centre line filling as you scroll (scroll-driven, progressive). Alternation is one variant on the list item — md:even:[&>article]:col-start-3 — not separate left/right markup.
## HTML
```html
<section class="tfs-22 w-full min-h-svh bg-tfs22-bg px-5 py-20 font-tfs22-sans text-white antialiased sm:py-28" aria-labelledby="tfs-22-h">
  <div class="mx-auto grid w-full max-w-5xl gap-16">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-semibold text-tfs22-acc">Your first 30 days</p>
      <h2 id="tfs-22-h" class="text-balance font-tfs22-display text-4xl font-bold tracking-tight sm:text-6xl">From kickoff to fully live</h2>
    </header>
    <div class="relative [view-timeline-name:--tfs22]">
    <div aria-hidden="true" class="absolute bottom-0 left-5 top-0 w-0.5 overflow-hidden rounded-full bg-white/10 md:left-1/2 md:-translate-x-1/2"><span class="block size-full origin-top bg-linear-to-b from-tfs22-acc to-tfs22-acc2 supports-[animation-timeline:view()]:animate-tfs22-fill supports-[animation-timeline:view()]:[animation-timeline:--tfs22] supports-[animation-timeline:view()]:[animation-range:entry_50%_exit_50%] motion-reduce:animate-none"></span></div>
    <ol class="grid gap-10">
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="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>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-01" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 1</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Kickoff call</h3>
          <p class="text-pretty text-tfs22-mut">Meet your solutions engineer and map your current workflows.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="M12 8c5 0 9-1.3 9-3s-4-3-9-3-9 1.3-9 3 4 3 9 3zM3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/></svg></span>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-03" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 3</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Data connected</h3>
          <p class="text-pretty text-tfs22-mut">Warehouse and CRM synced; historical data backfilled overnight.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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="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>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-14" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 14</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Team onboarded</h3>
          <p class="text-pretty text-tfs22-mut">Role-based training for admins, managers and reps.</p>
        </article>
      </li>
      <li class="relative grid grid-cols-[2.5rem_1fr] gap-5 md:grid-cols-[1fr_2.5rem_1fr] md:gap-8 md:even:[&>article]:col-start-3 md:even:[&>article]:text-left md:odd:[&>article]:text-right">
        <span class="relative z-10 grid size-10 place-items-center rounded-full bg-tfs22-card text-tfs22-acc ring-8 ring-tfs22-bg md:col-start-2 md:row-start-1"><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></span>
        <article class="group grid gap-2 rounded-3xl bg-tfs22-card p-6 ring-1 ring-white/10 transition hover:ring-tfs22-acc/40 md:col-start-1 md:row-start-1 sm:p-7">
          <time datetime="2026-10-30" class="font-tfs22-display text-sm font-semibold text-tfs22-acc">Day 30</time>
          <h3 class="font-tfs22-display text-2xl font-bold">Fully live</h3>
          <p class="text-pretty text-tfs22-mut">First automated report lands in every inbox. Success review booked.</p>
        </article>
      </li>
    </ol>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs22-bg: #0b0f1a;
  --color-tfs22-bg: oklch(0.17 0.024 268);
  --color-tfs22-card: #121829;
  --color-tfs22-card: oklch(0.212 0.035 269);
  --color-tfs22-mut: #a9b2c7;
  --color-tfs22-mut: oklch(0.763 0.032 267);
  --color-tfs22-acc: #fb923c;
  --color-tfs22-acc: oklch(0.758 0.159 56);
  --color-tfs22-acc2: #f43f5e;
  --color-tfs22-acc2: oklch(0.645 0.215 16);
  --font-tfs22-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-tfs22-sans: 'DM Sans', system-ui, sans-serif;
  --animate-tfs22-fill: tfs22-fill linear both;

  @keyframes tfs22-fill {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }
}
/* 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-22 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

One list, two layouts. Each <li> is a three-column grid on desktop: card, dot, spacer. Even items move the card to column 3 with md:even:[&>article]:col-start-3. On phones the grid collapses to dot + card along a left rail.

A rail that fills. The fill layer is origin-top scale-y-0 and, where supported, plays animate-tfs22-fill on the list's view timeline. Elsewhere it shows fully filled.

Make it yours

  • Add a milestone: copy one <li>; alternation continues automatically.
  • Change rail colours via --color-tfs22-acc/acc2.
  • Use it as a changelog by swapping titles for version numbers.

Gotchas — read before shipping

  • Keep cards in source order for reading; alternate visually only.
  • <time datetime> should be machine-readable (ISO 8601).
  • The fill depends on scroll-driven animations; it is static-full elsewhere — by design.

Browser support

ChromeSafariFirefoxEdge
115+26+not yet115+

Floor set by oklch(), animation-timeline as this demo is written. The core technique itself goes back further — Chrome 111+.

Layout everywhere; rail fill is Chromium 115+ / Safari 26 only.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗

Plain CSSno Tailwind surface

scroll driven animationstw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →