21 Tailwind CSS Pricing Sections
08 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Vertical Tier Timeline Pricing

Tiers as three stops on one road: a glowing lime spine, numbered station markers and a highlighted &ldquo;you are here&rdquo; pane. Reading it as an <ol> is the whole point — and the port keeps the spine as a before: pseudo-element on the list, because a connector belongs to the list, not to any tier.

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="tps-08 w-full min-h-svh bg-tps08-bg font-tps08-sans text-tps08-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(28px,5vw,44px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] text-tps08-bright text-pretty">Grow into the next plan, not out of one.</h2>
    <p class="m-0 text-sm text-tps08-mut">Three stops on the same road. Switch up or down with one click.</p>
  </header>
  <ol class="relative list-none p-0 m-0 mx-auto max-w-[580px] before:content-[''] before:absolute before:left-7 before:top-4.5 before:bottom-4.5 before:w-0.5 before:rounded-sm before:bg-linear-to-b before:from-tps08-acc before:to-tps08-fade">
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold text-tps08-acc" aria-hidden="true">01</span>
      <article class="p-4.5 pb-4 rounded-xl bg-tps08-pane border border-tps08-edge">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Free</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">$0</span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">Open-source projects, side experiments, anything you want to ship without a credit card.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>1 project</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>500 MB storage</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Public repos only</li>
        </ul>
        <a href="#free" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline text-tps08-acc border border-tps08-ctaedge transition-[background-color,color] duration-200 hover:bg-tps08-chip hover:text-tps08-ink focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Start free &rarr;</a>
      </article>
    </li>
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-acc text-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold shadow-[0_0_0_6px_--theme(--color-tps08-halo)]" aria-hidden="true">02</span>
      <article class="p-4.5 pb-4 rounded-xl border border-tps08-acc bg-linear-to-b from-tps08-pane2 to-tps08-pane shadow-[0_8px_24px_--theme(--color-tps08-glow)]">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Pro</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">$24<em class="ml-0.5 text-xs font-medium not-italic text-tps08-mut">/mo</em></span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">Where most teams settle. Private projects, real support, and the integrations you actually use.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Unlimited projects</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>50 GB storage</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Email + chat support</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Slack, GitHub, Linear sync</li>
        </ul>
        <a href="#pro" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline bg-tps08-acc text-tps08-bg border border-tps08-acc transition-[background-color,border-color] duration-200 hover:bg-tps08-acc2 hover:border-tps08-acc2 focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro &rarr;</a>
      </article>
    </li>
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold text-tps08-acc" aria-hidden="true">03</span>
      <article class="p-4.5 pb-4 rounded-xl bg-tps08-pane border border-tps08-edge">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Enterprise</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">Custom</span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">For teams with procurement processes, security reviews, and quarterly business reviews.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>SSO + SAML + audit logs</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>SLA, dedicated CSM</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Custom DPA &amp; invoicing</li>
        </ul>
        <a href="#ent" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline text-tps08-acc border border-tps08-ctaedge transition-[background-color,color] duration-200 hover:bg-tps08-chip hover:text-tps08-ink focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Talk to sales &rarr;</a>
      </article>
    </li>
  </ol>
</section>
@import "tailwindcss";

@theme {
  --color-tps08-bg: #0a1408;
  --color-tps08-bg: oklch(0.16 0.03 135);
  --color-tps08-pane: #14210e;
  --color-tps08-pane: oklch(0.22 0.04 135);
  --color-tps08-pane2: #1a3010;
  --color-tps08-pane2: oklch(0.28 0.06 135);
  --color-tps08-edge: #2f4a1f;
  --color-tps08-edge: oklch(0.36 0.06 130);
  --color-tps08-ctaedge: #4d7a2f;
  --color-tps08-ctaedge: oklch(0.5 0.1 130);
  --color-tps08-chip: #1f3a12;
  --color-tps08-chip: oklch(0.3 0.07 132);
  --color-tps08-ink: #ecfccb;
  --color-tps08-ink: oklch(0.96 0.05 120);
  --color-tps08-bright: #f7feec;
  --color-tps08-bright: oklch(0.99 0.02 120);
  --color-tps08-body: #c8d8b0;
  --color-tps08-body: oklch(0.86 0.05 120);
  --color-tps08-mut: #93a87f;
  --color-tps08-mut: oklch(0.7 0.05 125);
  --color-tps08-acc: #84cc16;
  --color-tps08-acc: oklch(0.77 0.2 128);
  --color-tps08-acc2: #a3e635;
  --color-tps08-acc2: oklch(0.85 0.19 126);
  --color-tps08-fade: #84cc1633;
  --color-tps08-fade: oklch(0.77 0.2 128 / 0.2);
  --color-tps08-halo: #84cc162e;
  --color-tps08-halo: oklch(0.77 0.2 128 / 0.18);
  --color-tps08-glow: #84cc161f;
  --color-tps08-glow: oklch(0.77 0.2 128 / 0.12);
  --font-tps08-sans: 'Inter', system-ui, sans-serif;
  --font-tps08-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-08 {
  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-tps08-bg: #0a1408;
  --color-tps08-bg: oklch(0.16 0.03 135);
  --color-tps08-pane: #14210e;
  --color-tps08-pane: oklch(0.22 0.04 135);
  --color-tps08-pane2: #1a3010;
  --color-tps08-pane2: oklch(0.28 0.06 135);
  --color-tps08-edge: #2f4a1f;
  --color-tps08-edge: oklch(0.36 0.06 130);
  --color-tps08-ctaedge: #4d7a2f;
  --color-tps08-ctaedge: oklch(0.5 0.1 130);
  --color-tps08-chip: #1f3a12;
  --color-tps08-chip: oklch(0.3 0.07 132);
  --color-tps08-ink: #ecfccb;
  --color-tps08-ink: oklch(0.96 0.05 120);
  --color-tps08-bright: #f7feec;
  --color-tps08-bright: oklch(0.99 0.02 120);
  --color-tps08-body: #c8d8b0;
  --color-tps08-body: oklch(0.86 0.05 120);
  --color-tps08-mut: #93a87f;
  --color-tps08-mut: oklch(0.7 0.05 125);
  --color-tps08-acc: #84cc16;
  --color-tps08-acc: oklch(0.77 0.2 128);
  --color-tps08-acc2: #a3e635;
  --color-tps08-acc2: oklch(0.85 0.19 126);
  --color-tps08-fade: #84cc1633;
  --color-tps08-fade: oklch(0.77 0.2 128 / 0.2);
  --color-tps08-halo: #84cc162e;
  --color-tps08-halo: oklch(0.77 0.2 128 / 0.18);
  --color-tps08-glow: #84cc161f;
  --color-tps08-glow: oklch(0.77 0.2 128 / 0.12);
  --font-tps08-sans: 'Inter', system-ui, sans-serif;
  --font-tps08-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-08 {
  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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap">

What changed in the port

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

  • The spine survives as a before: pseudo-element on the <ol>, and gradient utilities work inside the variant (before:bg-linear-to-b before:from-tps08-acc before:to-tps08-fade) — no arbitrary value needed.
  • .ps-08__stop:last-child { padding-bottom: 0 } becomes last:pb-0 on every stop: the same rule, stated on the elements it can apply to.
  • The two .ps-08__current .x descendant rules become highlight utilities on the marker and the pane. Moving the recommendation is now a copy-paste of classes, which is what a CMS can actually do.
  • The 6px halo stays a shadow-[…] with a token colour rather than a ring-*: a ring's offset would have to know the section background.
  • The → bullets become aria-hidden spans, because generated content has no utility form — the same trade as demo 01's masked check.
  • size-11.5 replaces the width/height pair on the markers, and grid place-items-center replaces the flex centring trio.
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 Tier Timeline Pricing
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-vertical-tier-timeline-pricing/

Tiers as three stops on one road: a glowing lime spine, numbered station markers and a highlighted &ldquo;you are here&rdquo; pane. Reading it as an <ol> is the whole point &mdash; and the port keeps the spine as a before: pseudo-element on the list, because a connector belongs to the list, not to any tier.
## HTML
```html
<section class="tps-08 w-full min-h-svh bg-tps08-bg font-tps08-sans text-tps08-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(28px,5vw,44px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] text-tps08-bright text-pretty">Grow into the next plan, not out of one.</h2>
    <p class="m-0 text-sm text-tps08-mut">Three stops on the same road. Switch up or down with one click.</p>
  </header>
  <ol class="relative list-none p-0 m-0 mx-auto max-w-[580px] before:content-[''] before:absolute before:left-7 before:top-4.5 before:bottom-4.5 before:w-0.5 before:rounded-sm before:bg-linear-to-b before:from-tps08-acc before:to-tps08-fade">
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold text-tps08-acc" aria-hidden="true">01</span>
      <article class="p-4.5 pb-4 rounded-xl bg-tps08-pane border border-tps08-edge">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Free</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">$0</span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">Open-source projects, side experiments, anything you want to ship without a credit card.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>1 project</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>500 MB storage</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Public repos only</li>
        </ul>
        <a href="#free" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline text-tps08-acc border border-tps08-ctaedge transition-[background-color,color] duration-200 hover:bg-tps08-chip hover:text-tps08-ink focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Start free &rarr;</a>
      </article>
    </li>
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-acc text-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold shadow-[0_0_0_6px_--theme(--color-tps08-halo)]" aria-hidden="true">02</span>
      <article class="p-4.5 pb-4 rounded-xl border border-tps08-acc bg-linear-to-b from-tps08-pane2 to-tps08-pane shadow-[0_8px_24px_--theme(--color-tps08-glow)]">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Pro</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">$24<em class="ml-0.5 text-xs font-medium not-italic text-tps08-mut">/mo</em></span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">Where most teams settle. Private projects, real support, and the integrations you actually use.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Unlimited projects</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>50 GB storage</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Email + chat support</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Slack, GitHub, Linear sync</li>
        </ul>
        <a href="#pro" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline bg-tps08-acc text-tps08-bg border border-tps08-acc transition-[background-color,border-color] duration-200 hover:bg-tps08-acc2 hover:border-tps08-acc2 focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Choose Pro &rarr;</a>
      </article>
    </li>
    <li class="relative min-h-14 pl-17.5 pb-6 last:pb-0">
      <span class="absolute left-1.5 top-0 z-1 grid place-items-center size-11.5 rounded-full bg-tps08-bg border-2 border-tps08-acc font-tps08-mono text-[13px] font-bold text-tps08-acc" aria-hidden="true">03</span>
      <article class="p-4.5 pb-4 rounded-xl bg-tps08-pane border border-tps08-edge">
        <header class="flex items-baseline justify-between pb-2.5 mb-2 border-b border-dashed border-tps08-edge">
          <h3 class="m-0 text-sm font-bold tracking-[0.06em] uppercase text-tps08-acc">Enterprise</h3>
          <span class="text-[22px] font-extrabold tracking-[-0.02em] text-tps08-bright">Custom</span>
        </header>
        <p class="my-2.5 text-[13px]/[1.55] text-tps08-body">For teams with procurement processes, security reviews, and quarterly business reviews.</p>
        <ul class="list-none p-0 m-0 mb-3.5 text-[13px]/[1.85] text-tps08-body">
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>SSO + SAML + audit logs</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>SLA, dedicated CSM</li>
          <li><span class="inline-block w-5 font-bold text-tps08-acc" aria-hidden="true">&rarr;</span>Custom DPA &amp; invoicing</li>
        </ul>
        <a href="#ent" class="inline-block px-3.5 py-2.25 rounded-[7px] text-[13px] font-semibold no-underline text-tps08-acc border border-tps08-ctaedge transition-[background-color,color] duration-200 hover:bg-tps08-chip hover:text-tps08-ink focus-visible:outline-2 focus-visible:outline-tps08-acc2 focus-visible:outline-offset-3 motion-reduce:transition-none">Talk to sales &rarr;</a>
      </article>
    </li>
  </ol>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps08-bg: #0a1408;
  --color-tps08-bg: oklch(0.16 0.03 135);
  --color-tps08-pane: #14210e;
  --color-tps08-pane: oklch(0.22 0.04 135);
  --color-tps08-pane2: #1a3010;
  --color-tps08-pane2: oklch(0.28 0.06 135);
  --color-tps08-edge: #2f4a1f;
  --color-tps08-edge: oklch(0.36 0.06 130);
  --color-tps08-ctaedge: #4d7a2f;
  --color-tps08-ctaedge: oklch(0.5 0.1 130);
  --color-tps08-chip: #1f3a12;
  --color-tps08-chip: oklch(0.3 0.07 132);
  --color-tps08-ink: #ecfccb;
  --color-tps08-ink: oklch(0.96 0.05 120);
  --color-tps08-bright: #f7feec;
  --color-tps08-bright: oklch(0.99 0.02 120);
  --color-tps08-body: #c8d8b0;
  --color-tps08-body: oklch(0.86 0.05 120);
  --color-tps08-mut: #93a87f;
  --color-tps08-mut: oklch(0.7 0.05 125);
  --color-tps08-acc: #84cc16;
  --color-tps08-acc: oklch(0.77 0.2 128);
  --color-tps08-acc2: #a3e635;
  --color-tps08-acc2: oklch(0.85 0.19 126);
  --color-tps08-fade: #84cc1633;
  --color-tps08-fade: oklch(0.77 0.2 128 / 0.2);
  --color-tps08-halo: #84cc162e;
  --color-tps08-halo: oklch(0.77 0.2 128 / 0.18);
  --color-tps08-glow: #84cc161f;
  --color-tps08-glow: oklch(0.77 0.2 128 / 0.12);
  --font-tps08-sans: 'Inter', system-ui, sans-serif;
  --font-tps08-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-08 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The spine belongs to the list.

<ol class="relative list-none max-w-[580px] mx-auto
  before:content-[''] before:absolute before:left-7 before:top-4.5 before:bottom-4.5
  before:w-0.5 before:rounded-sm
  before:bg-linear-to-b before:from-tps08-acc before:to-tps08-fade">

Two things matter here: gradient utilities work inside the before: variant, so the line fades downward without an arbitrary value; and the top/bottom insets are what make the spine terminate inside the outer markers rather than poking past them.

Two rules for “current” become five utilities. The CSS version writes .ps-08__current .ps-08__num and .ps-08__current .ps-08__pane. Here the marker and the pane each carry their own highlighted appearance. There is no shared state to look up — which is right, because “which tier is current” is content, not behaviour, and a CMS can move it by moving classes.

Why an <ol>. A screen reader announces “list, 3 items, item 2”, which is exactly the mental model the design is selling: a path with an order. The numerals stay aria-hidden because the list already conveys the count.

The 6px halo is a ring, not a border. shadow-[0_0_0_6px_…] paints outside the marker without changing its 46px footprint, so the spine stays centred behind it.

Make it yours

  • Move &ldquo;current&rdquo; to another tier: copy the five highlight utilities from stop 02 to another stop. Nothing is index-aware.
  • Add a fourth stop by copying an <li> — the spine spans the whole list automatically, since it is inset from its own top and bottom.
  • Horizontal variant: make the <ol> md:flex and turn the spine into a before:h-0.5 before:left-6 before:right-6 before:top-6 rail; the markers keep working.
  • Retheme through --color-tps08-acc — the spine gradient, the markers, the halo, every arrow bullet and the primary CTA read it.
  • Swap the arrow bullets for checks by editing the glyph in the spans; they are inline text, not generated content.

Gotchas — read before shipping

  • The spine needs relative on the <ol> and its markers need z-1, or the line draws over the numerals.
  • before:top-4.5 before:bottom-4.5 is deliberate — a spine at inset-y-0 sticks out above the first marker and below the last, which reads as a rendering bug.
  • before:content-[''] is mandatory; without it there is no spine and no error.
  • list-none must stay, otherwise the browser's own numbering shows up beside the custom markers.
  • Do not swap the <ol> for <div>s once the numerals are aria-hidden — the list is the only thing left conveying order to assistive tech.
  • The halo is shadow-*, not ring-* with an offset: a ring's offset colour would have to match the section background, which breaks the moment the section sits on a gradient.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Everything here is long-standing CSS — pseudo-elements, absolute positioning, gradients and box shadows. The floor quoted here is Tailwind v4's own generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗linear gradienttw ↗box-shadowtw ↗flexboxtw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →