25 Tailwind CSS FAQ Accordion
14 / 25

All 25 in 25 Tailwind CSS FAQ Accordion

  1. 01Tailwind Peer-Checked FAQ Accordion with No JavaScript
  2. 02Tailwind Native Details/Summary FAQ with Custom Styled Icons
  3. 03Tailwind Exclusive Accordion — Only One FAQ Open at a Time
  4. 04Tailwind Multi-Open FAQ Accordion with a Live CSS Counter
  5. 05Tailwind CSS FAQ Accordion Template (Free, Copy-Paste)
  6. 06Tailwind Dark Mode FAQ Accordion with light-dark() and No .dark Class
  7. 07Tailwind Glassmorphism FAQ Accordion with Frosted Backdrop Blur
  8. 08Tailwind Minimalist E-Commerce FAQ Accordion for Product Pages
  9. 09Tailwind Neumorphic Soft-UI FAQ Accordion Cards
  10. 10Tailwind Animate Height Auto FAQ with grid-rows 0fr to 1fr
  11. 11Tailwind FAQ Chevron Rotate 180 Degrees on Toggle
  12. 12Tailwind Animated Plus to Minus Icon Morph FAQ Accordion
  13. 13Tailwind Spring Bounce FAQ Accordion with linear() Easing
  14. 14Tailwind Two-Column FAQ Accordion Grid with Independent Columns
  15. 15Tailwind Horizontal FAQ Accordion with Sideways Expanding Panels
  16. 16Tailwind Categorised FAQ Help Centre with a Sticky Sidebar Menu
  17. 17Tailwind Card-Style FAQ Panels with a Layered Shadow Elevation System
  18. 18Tailwind FAQ Accordion with a Live Search Bar Filter
  19. 19Tailwind Expand All and Collapse All FAQ Accordion Buttons
  20. 20Tailwind FAQ with a Still Have Questions Contact CTA Card
  21. 21Tailwind Accessible ARIA FAQ Accordion with Keyboard Navigation
  22. 22Tailwind FAQ with FAQPage JSON-LD Schema for Rich Snippets and AI Search
  23. 23Bootstrap 5 Accordion Rebuilt in Tailwind (and the JavaScript You Delete)
  24. 24Tailwind FAQ Component in React, Vue, Svelte and Astro (One Port Recipe)
  25. 25Tailwind FAQ with Voice Search Using the Speech Recognition API
Pure TailwindMIT licensed

Tailwind Two-Column FAQ Accordion Grid with Independent Columns

A wide FAQ split into two independent columns — the layout every marketing site wants past eight questions — built so an opening panel pushes down only its own column, never its horizontal neighbour. The trap almost everyone hits is one flat grid of items, where row alignment makes cells stretch each other; the fix is two column containers, and it is two utilities.

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="tfa-14 w-full min-h-svh font-tfa14-sans text-tfa14-ink">
  <div class="@container grid min-h-svh w-full place-items-center bg-tfa14-bg px-5 py-12 bg-[linear-gradient(180deg,var(--color-tfa14-wash),var(--color-tfa14-bg)_36%)]">
    <div class="w-[min(980px,100%)]">
      <header class="text-center">
        <h1 class="text-[clamp(26px,4.4vw,40px)] font-extrabold tracking-[-0.025em]">Everything buyers ask</h1>
        <p class="mx-auto mt-3 max-w-[52ch] text-[14.5px] leading-relaxed text-tfa14-mut">Two independent columns — open any panel and only its own column reflows.</p>
      </header>

      <div data-panel class="mt-8 grid items-start gap-3 @3xl:grid-cols-2 @3xl:gap-x-8">
        <div class="flex flex-col gap-3">
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]" open>
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">How fast is onboarding?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">Most teams import their data and invite the team in under an hour. A guided setup checklist tracks the six steps, and a specialist can join a call for workspaces over 50 seats.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Can we migrate from a competitor?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">One-click importers cover the four biggest tools, mapping projects, comments and attachments. Anything else comes in via CSV or the API — migrations team included on annual plans.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Is training included?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">Live weekly webinars and a self-serve academy are free for everyone. Enterprise plans add two bespoke training sessions, recorded for your internal wiki.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">What uptime do you guarantee?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">99.9% on every paid plan, 99.99% with the enterprise SLA — backed by service credits, with a public status page and five-year incident history.</p>
          </details>
        </div>
        <div class="flex flex-col gap-3">
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Where is data stored?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">US or EU region, chosen at workspace creation and never moved without written consent. Backups stay in-region, encrypted with per-tenant keys.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Do you support SSO and SCIM?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">SAML SSO and SCIM provisioning ship on the Business tier — Okta, Entra, Google and OneLogin have first-party guides. Enforced 2FA is available on every plan, free.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Can we self-host?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">No — and honestly, that is why the product ships weekly. The compliance package (SOC 2 Type II, ISO 27001, DPA, pen-test summaries) answers what self-hosting usually stands in for.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">What is the contract minimum?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">None on monthly. Annual contracts run 12 months with a 60-day opt-out pilot window for new enterprise customers — if it is not landing, you leave with a full refund.</p>
          </details>
        </div>
      </div>

      <p class="mt-7 text-center text-[12.5px] text-tfa14-mut">Grid places the columns, flexbox stacks the items — the split is what keeps neighbours independent.</p>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfa14-bg: #f9fbfc;
  --color-tfa14-bg: oklch(0.98 0.006 200);
  --color-tfa14-wash: #e8f2f6;
  --color-tfa14-wash: oklch(0.94 0.025 205);
  --color-tfa14-ink: #1e2a33;
  --color-tfa14-ink: oklch(0.22 0.03 220);
  --color-tfa14-mut: #566470;
  --color-tfa14-mut: oklch(0.47 0.022 215);
  --color-tfa14-edge: #e1e7ec;
  --color-tfa14-edge: oklch(0.91 0.012 205);
  --color-tfa14-accedge: #7fb3c8;
  --color-tfa14-accedge: oklch(0.73 0.07 210);
  --color-tfa14-tint: #eaf4f8;
  --color-tfa14-tint: oklch(0.95 0.02 205);
  --color-tfa14-acc: #1f6f91;
  --color-tfa14-acc: oklch(0.5 0.11 220);
  --font-tfa14-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-14 {
  width: 100%;
  min-height: 100svh;
}

.tfa-14 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-14 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .38s allow-discrete;
  }

  .tfa-14 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-14 details::details-content {
    transition-duration: 1ms;
  }
}

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-tfa14-bg: #f9fbfc;
  --color-tfa14-bg: oklch(0.98 0.006 200);
  --color-tfa14-wash: #e8f2f6;
  --color-tfa14-wash: oklch(0.94 0.025 205);
  --color-tfa14-ink: #1e2a33;
  --color-tfa14-ink: oklch(0.22 0.03 220);
  --color-tfa14-mut: #566470;
  --color-tfa14-mut: oklch(0.47 0.022 215);
  --color-tfa14-edge: #e1e7ec;
  --color-tfa14-edge: oklch(0.91 0.012 205);
  --color-tfa14-accedge: #7fb3c8;
  --color-tfa14-accedge: oklch(0.73 0.07 210);
  --color-tfa14-tint: #eaf4f8;
  --color-tfa14-tint: oklch(0.95 0.02 205);
  --color-tfa14-acc: #1f6f91;
  --color-tfa14-acc: oklch(0.5 0.11 220);
  --font-tfa14-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-14 {
  width: 100%;
  min-height: 100svh;
}

.tfa-14 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-14 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .38s allow-discrete;
  }

  .tfa-14 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-14 details::details-content {
    transition-duration: 1ms;
  }
}
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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">

What changed in the port

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

  • The layout advice survives the port unchanged — two stacks, not one grid — but it is now visible in the markup rather than explained in a comment: you can see two flex flex-col containers, so the independence is self-documenting.
  • items-start on the outer grid is the utility spelling of align-items:start, and it remains the single most forgotten rule in two-column FAQ layouts.
  • The container query moved from a CSS block to an @container parent plus @3xl:grid-cols-2, so the whole responsive layer left the stylesheet.
  • UI upgrade from the CSS original: muted copy oklch(0.5) → 0.47 and the accent 0.6 0.13 210 → 0.5 0.11 220 — the original's cyan hover ink measured about 3.3:1 on white, which is below AA for 14.5px text.
  • UI upgrade: the open card's shadow is now a tight, tinted lift rather than a diffuse grey one, so an open panel is distinguishable from its closed neighbour in the other column at a glance.
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 Two-Column FAQ Accordion Grid with Independent Columns
Source: https://codefronts.com/snippets/tailwind-css-faq-accordion/tailwind-two-column-faq-accordion-grid/

A wide FAQ split into two independent columns — the layout every marketing site wants past eight questions — built so an opening panel pushes down only its own column, never its horizontal neighbour. The trap almost everyone hits is one flat grid of items, where row alignment makes cells stretch each other; the fix is two column containers, and it is two utilities.
## HTML
```html
<section class="tfa-14 w-full min-h-svh font-tfa14-sans text-tfa14-ink">
  <div class="@container grid min-h-svh w-full place-items-center bg-tfa14-bg px-5 py-12 bg-[linear-gradient(180deg,var(--color-tfa14-wash),var(--color-tfa14-bg)_36%)]">
    <div class="w-[min(980px,100%)]">
      <header class="text-center">
        <h1 class="text-[clamp(26px,4.4vw,40px)] font-extrabold tracking-[-0.025em]">Everything buyers ask</h1>
        <p class="mx-auto mt-3 max-w-[52ch] text-[14.5px] leading-relaxed text-tfa14-mut">Two independent columns — open any panel and only its own column reflows.</p>
      </header>

      <div data-panel class="mt-8 grid items-start gap-3 @3xl:grid-cols-2 @3xl:gap-x-8">
        <div class="flex flex-col gap-3">
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]" open>
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">How fast is onboarding?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">Most teams import their data and invite the team in under an hour. A guided setup checklist tracks the six steps, and a specialist can join a call for workspaces over 50 seats.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Can we migrate from a competitor?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">One-click importers cover the four biggest tools, mapping projects, comments and attachments. Anything else comes in via CSV or the API — migrations team included on annual plans.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Is training included?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">Live weekly webinars and a self-serve academy are free for everyone. Enterprise plans add two bespoke training sessions, recorded for your internal wiki.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">What uptime do you guarantee?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">99.9% on every paid plan, 99.99% with the enterprise SLA — backed by service credits, with a public status page and five-year incident history.</p>
          </details>
        </div>
        <div class="flex flex-col gap-3">
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Where is data stored?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">US or EU region, chosen at workspace creation and never moved without written consent. Backups stay in-region, encrypted with per-tenant keys.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Do you support SSO and SCIM?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">SAML SSO and SCIM provisioning ship on the Business tier — Okta, Entra, Google and OneLogin have first-party guides. Enforced 2FA is available on every plan, free.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">Can we self-host?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">No — and honestly, that is why the product ships weekly. The compliance package (SOC 2 Type II, ISO 27001, DPA, pen-test summaries) answers what self-hosting usually stands in for.</p>
          </details>
          <details class="group rounded-2xl border border-tfa14-edge bg-white shadow-[0_2px_10px_oklch(0.4_0.04_215/0.05)] transition-[border-color,box-shadow] duration-300 open:border-tfa14-accedge open:shadow-[0_12px_30px_-18px_oklch(0.45_0.1_212/0.35)]">
            <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3.5 px-5 py-4 text-[14.5px] font-semibold transition-colors duration-200 hover:text-tfa14-acc focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa14-acc [&::-webkit-details-marker]:hidden">What is the contract minimum?
              <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa14-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
            </summary>
            <p class="max-w-[54ch] px-5 pb-4 text-[13.5px] leading-[1.7] text-tfa14-mut">None on monthly. Annual contracts run 12 months with a 60-day opt-out pilot window for new enterprise customers — if it is not landing, you leave with a full refund.</p>
          </details>
        </div>
      </div>

      <p class="mt-7 text-center text-[12.5px] text-tfa14-mut">Grid places the columns, flexbox stacks the items — the split is what keeps neighbours independent.</p>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfa14-bg: #f9fbfc;
  --color-tfa14-bg: oklch(0.98 0.006 200);
  --color-tfa14-wash: #e8f2f6;
  --color-tfa14-wash: oklch(0.94 0.025 205);
  --color-tfa14-ink: #1e2a33;
  --color-tfa14-ink: oklch(0.22 0.03 220);
  --color-tfa14-mut: #566470;
  --color-tfa14-mut: oklch(0.47 0.022 215);
  --color-tfa14-edge: #e1e7ec;
  --color-tfa14-edge: oklch(0.91 0.012 205);
  --color-tfa14-accedge: #7fb3c8;
  --color-tfa14-accedge: oklch(0.73 0.07 210);
  --color-tfa14-tint: #eaf4f8;
  --color-tfa14-tint: oklch(0.95 0.02 205);
  --color-tfa14-acc: #1f6f91;
  --color-tfa14-acc: oklch(0.5 0.11 220);
  --font-tfa14-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-14 {
  width: 100%;
  min-height: 100svh;
}

.tfa-14 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-14 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .38s allow-discrete;
  }

  .tfa-14 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-14 details::details-content {
    transition-duration: 1ms;
  }
}
```

How this works

The bug first. The naive build puts all items in one grid-cols-2 container — and every cell aligns to its row, so opening a left panel drags its right neighbour down. Grid is doing its job; it is just the wrong job.

The fix is columns as containers. An outer @3xl:grid-cols-2 items-start grid holds two flex flex-col gap-3 stacks. Items inside a stack push only their own column. This is also where the search phrase earns its keep: grid places the columns, flexbox stacks the items.

Two alternatives, and when to use them. CSS multicol (columns-2) auto-balances a flat list but reorders reading flow and can split an open panel across the column fold — fine for link lists, wrong for interactive disclosure. And a single-column accordion inside a two-column page grid (demo 08) when there are only four questions.

Reading order note: two explicit columns mean DOM order is left column top-to-bottom, then right. Keep related questions in the same column so keyboard users meet them together.

Make it yours

  • Column balance: distribute by expected answer length, not count — the columns are independent, so a 5/3 split is fine.
  • Three columns: add a third stack and @5xl:grid-cols-3; collapse in two steps for narrow parents.
  • Zebra accent: odd:bg-tfa14-tint inside each stack adds scan rhythm on long lists.
  • With an odd question count, put the extra item in the LEFT column — F-pattern scanning finds it first.

Gotchas — read before shipping

  • The number-one bug: one grid container holding all items. Row-locked cells stretch their horizontal neighbour, and no items-* utility fixes it — you need two stacks.
  • Do not forget items-start on the outer grid; the default stretch makes the short column's last card grow mysteriously.
  • columns-2 can break an OPEN panel across the fold. Never use multicol for disclosure.
  • Container variants need @container on an ancestor — without it @3xl: silently never matches and you ship a one-column FAQ.

Browser support

ChromeSafariFirefoxEdge
129+not yetnot yet129+

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

Grid and flex layout are universal; container queries (2022–23) drive the collapse. The animated panel enhances progressively as in demo 02.

Techniques used in this demo

Utilitiesfirst-class utility or variant

container queriestw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →