22 Tailwind CSS Feature Sections
18 / 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 Comparison Table Section

A real, accessible <table> comparing your product against two alternatives and the spreadsheet, grouped into sections. Your column is tinted and crowned; the feature column stays sticky while the table scrolls horizontally on phones; and a row-hover highlight uses has-[td:hover]: nowhere but plain hover: on the row.

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-18 w-full min-h-svh bg-tfs18-bg px-5 py-20 font-tfs18-sans text-tfs18-ink antialiased sm:py-28" aria-labelledby="tfs-18-h">
  <div class="mx-auto grid w-full max-w-5xl gap-12">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-bold text-tfs18-acc">Compare</p>
      <h2 id="tfs-18-h" class="text-balance text-4xl font-extrabold tracking-tight sm:text-5xl">Why teams pick Orbit over the alternatives</h2>
    </header>
    <div tabindex="0" role="region" aria-labelledby="tfs-18-h" class="relative overflow-x-auto rounded-3xl bg-white shadow-[0_30px_80px_-40px_rgb(30_41_59/0.35)] ring-1 ring-tfs18-line focus-visible:outline-2 focus-visible:outline-tfs18-acc">
      <table class="w-full min-w-[42rem] border-separate border-spacing-0 text-sm">
        <caption class="sr-only">Feature comparison of Orbit, Competitor A, Competitor B and spreadsheets</caption>
        <thead>
          <tr>
            <th scope="col" class="sticky left-0 z-10 bg-white p-5 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Feature</th>
            <th scope="col" class="bg-tfs18-acc p-5 text-white first:rounded-tl-none"><span class="block text-base font-extrabold">Orbit</span><span class="mt-0.5 block text-xs font-medium text-white/80">from $12/seat</span></th>
            <th scope="col" class="p-5 font-bold">Competitor A</th>
            <th scope="col" class="p-5 font-bold">Competitor B</th>
            <th scope="col" class="p-5 font-bold">Spreadsheets</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Planning</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Roadmaps &amp; timelines</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Sprint planning</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Capacity forecasting</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Collaboration</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Real-time co-editing</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Guest access</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Two-way GitHub sync</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Admin</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">SSO / SAML on all plans</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Audit log</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tfoot><tr><td class="sticky left-0 bg-white p-5"></td><td class="bg-tfs18-acc/5 p-5 text-center"><a href="#tfs-18-h" class="inline-flex min-h-11 items-center rounded-xl bg-tfs18-acc px-5 font-bold text-white transition hover:bg-tfs18-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs18-acc">Start free</a></td><td colspan="3" class="p-5 text-left text-xs text-tfs18-mut">Compared against public plan pages, Sept 2026.</td></tr></tfoot>
      </table>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs18-bg: #f4f6fa;
  --color-tfs18-bg: oklch(0.973 0.006 265);
  --color-tfs18-ink: #0f172a;
  --color-tfs18-ink: oklch(0.208 0.04 266);
  --color-tfs18-mut: #4a5568;
  --color-tfs18-mut: oklch(0.447 0.034 261);
  --color-tfs18-line: #e2e8f0;
  --color-tfs18-line: oklch(0.929 0.013 256);
  --color-tfs18-acc: #0f766e;
  --color-tfs18-acc: oklch(0.511 0.086 186);
  --font-tfs18-sans: 'Manrope', 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-18 {
  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-tfs18-bg: #f4f6fa;
  --color-tfs18-bg: oklch(0.973 0.006 265);
  --color-tfs18-ink: #0f172a;
  --color-tfs18-ink: oklch(0.208 0.04 266);
  --color-tfs18-mut: #4a5568;
  --color-tfs18-mut: oklch(0.447 0.034 261);
  --color-tfs18-line: #e2e8f0;
  --color-tfs18-line: oklch(0.929 0.013 256);
  --color-tfs18-acc: #0f766e;
  --color-tfs18-acc: oklch(0.511 0.086 186);
  --font-tfs18-sans: 'Manrope', 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-18 {
  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=Manrope:wght@400..800&display=swap">

What changed in the port

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

  • The CSS original's .matrix td:nth-child(2) highlight became per-cell utilities, and its sticky column rule became sticky left-0 on the row headers.
  • UI upgrade from the CSS original: rows are grouped under Planning / Collaboration / Admin with scope="rowgroup" headers, making a long matrix scannable.
  • UI upgrade: a third state — 'Partial' — replaces the original's misleading binary check/cross, and every glyph has sr-only text.
  • UI upgrade: the scroll region is focusable and labelled, so keyboard users can scroll it; a dated source note sits in the footer beside the CTA.
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 Comparison Table Section
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-feature-comparison-table-section/

A real, accessible <table> comparing your product against two alternatives and the spreadsheet, grouped into sections. Your column is tinted and crowned; the feature column stays sticky while the table scrolls horizontally on phones; and a row-hover highlight uses has-[td:hover]: nowhere but plain hover: on the row.
## HTML
```html
<section class="tfs-18 w-full min-h-svh bg-tfs18-bg px-5 py-20 font-tfs18-sans text-tfs18-ink antialiased sm:py-28" aria-labelledby="tfs-18-h">
  <div class="mx-auto grid w-full max-w-5xl gap-12">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="text-sm font-bold text-tfs18-acc">Compare</p>
      <h2 id="tfs-18-h" class="text-balance text-4xl font-extrabold tracking-tight sm:text-5xl">Why teams pick Orbit over the alternatives</h2>
    </header>
    <div tabindex="0" role="region" aria-labelledby="tfs-18-h" class="relative overflow-x-auto rounded-3xl bg-white shadow-[0_30px_80px_-40px_rgb(30_41_59/0.35)] ring-1 ring-tfs18-line focus-visible:outline-2 focus-visible:outline-tfs18-acc">
      <table class="w-full min-w-[42rem] border-separate border-spacing-0 text-sm">
        <caption class="sr-only">Feature comparison of Orbit, Competitor A, Competitor B and spreadsheets</caption>
        <thead>
          <tr>
            <th scope="col" class="sticky left-0 z-10 bg-white p-5 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Feature</th>
            <th scope="col" class="bg-tfs18-acc p-5 text-white first:rounded-tl-none"><span class="block text-base font-extrabold">Orbit</span><span class="mt-0.5 block text-xs font-medium text-white/80">from $12/seat</span></th>
            <th scope="col" class="p-5 font-bold">Competitor A</th>
            <th scope="col" class="p-5 font-bold">Competitor B</th>
            <th scope="col" class="p-5 font-bold">Spreadsheets</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Planning</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Roadmaps &amp; timelines</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Sprint planning</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Capacity forecasting</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Collaboration</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Real-time co-editing</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Guest access</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Two-way GitHub sync</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tbody>
          <tr><th scope="rowgroup" colspan="5" class="sticky left-0 bg-tfs18-bg px-5 py-3 text-left text-xs font-bold uppercase tracking-wider text-tfs18-mut">Admin</th></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">SSO / SAML on all plans</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
          <tr class="group/row transition hover:[&>*]:bg-tfs18-bg/70"><th scope="row" class="sticky left-0 z-10 border-t border-tfs18-line bg-white p-5 text-left font-semibold shadow-[8px_0_12px_-10px_rgb(0_0_0/0.15)]">Audit log</th><td class="border-t border-tfs18-line p-5 text-center bg-tfs18-acc/5"><span class="mx-auto grid size-7 place-items-center rounded-full bg-tfs18-acc 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-4"><path d="M20 6 9 17l-5-5"/></svg></span><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="inline-flex rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">Partial</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-emerald-100 text-emerald-700"><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><span class="sr-only">Yes</span></td><td class="border-t border-tfs18-line p-5 text-center "><span class="mx-auto grid size-7 place-items-center rounded-full bg-slate-100 text-slate-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="sr-only">No</span></td></tr>
        </tbody>
        <tfoot><tr><td class="sticky left-0 bg-white p-5"></td><td class="bg-tfs18-acc/5 p-5 text-center"><a href="#tfs-18-h" class="inline-flex min-h-11 items-center rounded-xl bg-tfs18-acc px-5 font-bold text-white transition hover:bg-tfs18-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs18-acc">Start free</a></td><td colspan="3" class="p-5 text-left text-xs text-tfs18-mut">Compared against public plan pages, Sept 2026.</td></tr></tfoot>
      </table>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs18-bg: #f4f6fa;
  --color-tfs18-bg: oklch(0.973 0.006 265);
  --color-tfs18-ink: #0f172a;
  --color-tfs18-ink: oklch(0.208 0.04 266);
  --color-tfs18-mut: #4a5568;
  --color-tfs18-mut: oklch(0.447 0.034 261);
  --color-tfs18-line: #e2e8f0;
  --color-tfs18-line: oklch(0.929 0.013 256);
  --color-tfs18-acc: #0f766e;
  --color-tfs18-acc: oklch(0.511 0.086 186);
  --font-tfs18-sans: 'Manrope', 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-18 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Tables are the right element. A comparison is tabular data, so screen readers get row/column announcements for free. Section rows use <th scope="rowgroup" colspan="5">.

Mobile without a second layout. The wrapper scrolls horizontally; the first column is sticky left-0 with an opaque background and a right shadow, so feature names never scroll away.

Make it yours

  • Add a competitor: one more <th> and one cell per row.
  • Change the highlighted column by moving the tint utilities.
  • Swap 'Partial' for text values (e.g. '5 GB') — cells accept any content.

Gotchas — read before shipping

  • Sticky cells need an opaque background or scrolled content shows through.
  • Keep comparison claims factual and dated — they age quickly.
  • border-collapse: separate is needed for rounded crown corners.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Sticky table cells work across this range.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →