32 Tailwind CSS Accordions — Vertical & Horizontal
09 / 32

All 32 in 32 Tailwind CSS Accordions — Vertical & Horizontal

  1. 01Tailwind CSS FAQ Accordion with Details and Summary
  2. 02Tailwind CSS Mobile Navigation Accordion Menu
  3. 03Tailwind CSS Product Filter Sidebar Accordion
  4. 04Tailwind CSS Nested Accordion Tree View
  5. 05Smooth Animated Tailwind Accordion with Height Transition
  6. 06Tailwind CSS Exclusive Accordion — Only One Open at a Time
  7. 07Minimal Tailwind Accordion with Animated Underline
  8. 08Tailwind CSS Numbered Steps Accordion for Onboarding
  9. 09Tailwind Accordion with Plus Minus Icon Animation
  10. 10Tailwind CSS Accordion Card with Rotating Chevron
  11. 11Brutalist Tailwind CSS Accordion
  12. 12Glassmorphism Tailwind CSS Accordion
  13. 13Tailwind CSS Timeline Accordion for Changelogs
  14. 14Tailwind CSS Card Accordion with Elevation on Open
  15. 15Skewed Tailwind CSS Accordion with Slanted Headers
  16. 16Tailwind CSS Stepped Cascade Accordion
  17. 17Tailwind Accordion with Circular Progress Ring
  18. 18Tailwind CSS Accordion with Marquee Scrolling Title
  19. 19Tailwind CSS Code Editor Accordion for Documentation
  20. 20Tailwind CSS 3D Paper Fold Accordion
  21. 21Tailwind CSS Playlist Accordion with Equalizer Animation
  22. 22Tailwind CSS Stacked Cards Accordion
  23. 23Tailwind Accordion with Animated Gradient Border
  24. 24Dark Tailwind CSS Accordion with Aurora Glow
  25. 25Tailwind CSS Horizontal Accordion Tabs
  26. 26Tailwind CSS Expanding Image Gallery Accordion
  27. 27Tailwind CSS Horizontal Accordion Feature Section
  28. 28Editorial Horizontal Accordion with Numbered Spines in Tailwind
  29. 29Tailwind CSS Horizontal Accordion with clip-path Reveal
  30. 30Tailwind CSS Album Shelf Horizontal Accordion
  31. 31Tailwind CSS Cinematic Horizontal Accordion Slider
  32. 32Tailwind CSS Aurora Gradient Horizontal Accordion
Pure TailwindMIT licensed

Tailwind Accordion with Plus Minus Icon Animation

The plus that folds into a minus, ported into utilities: two <span> bars inside a square key, the vertical one turning group-open:rotate-90 onto the horizontal while the whole key spins group-open:rotate-180 on a springy curve. Set as a bold Swiss type-foundry licensing FAQ in warm ivory, ink black and signal orange — with a two-way height animation from the details-content: variant.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tac-09 w-full min-h-svh grid place-items-center bg-tac09-bg px-5 py-14 font-tac09-sans text-tac09-ink [interpolate-size:allow-keywords]" aria-label="Plus minus icon accordion demo">
  <div class="grid w-full justify-items-center gap-8">
    <div class="grid w-full max-w-5xl gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
      <header class="flex flex-col gap-6 lg:pt-1">
        <p class="flex items-center gap-2.5 font-tac09-mono text-xs font-medium tracking-[0.14em] uppercase text-tac09-mut"><span aria-hidden="true" class="size-2.5 rounded-full bg-tac09-acc"></span>Grotesk Foundry · Licensing</p>
        <h2 class="text-[clamp(44px,7vw,76px)] leading-[0.9] font-black tracking-[-0.045em] [font-stretch:88%]">Licences,<br>plainly<span class="text-tac09-acc">.</span></h2>
        <p class="max-w-sm text-[15.5px] leading-[1.6] text-tac09-mut text-pretty">One licence per family, scaled by team size. No page-view meters, no surprise renewals. If something isn't covered here, a type designer answers within a day.</p>
        <dl class="grid max-w-sm grid-cols-3 border-t-2 border-tac09-ink pt-4">
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Families</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">48</dd></div>
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Styles</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">612</dd></div>
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Reply</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">&lt;24h</dd></div>
        </dl>
      </header>

      <div class="border-b-2 border-tac09-ink">
        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none" open>
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">01</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Can I use the fonts in a logo?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Yes &mdash; every desktop licence includes logos and wordmarks at no extra cost, including trademark registration. Outlines may be modified, but you can't redistribute the edited font files.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">02</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">How are web licences counted?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">By domain, not traffic. One web licence covers a production domain plus unlimited staging and preview URLs. Self-host the WOFF2 files &mdash; we never ping a tracking server.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">03</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Do you offer student and nonprofit pricing?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Students get any family free for non-commercial work with a university email. Registered nonprofits take 50% off every plan &mdash; send your registration number and we'll issue a code the same day.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">04</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Can I upgrade my team size later?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Anytime. You only pay the difference between tiers, prorated to the day, and the new seat count applies to every family you already own.</p>
          </div>
        </details>
      </div>
    </div>
    <p aria-hidden="true" class="border-2 border-tac09-ink px-3.5 py-2 font-tac09-mono text-[11.5px] text-tac09-ink">group-open:rotate-90 · group-open:rotate-180 · open:details-content:h-auto</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tac09-bg: #f4efe4;
  --color-tac09-bg: oklch(0.955 0.015 85);
  --color-tac09-ink: #141210;
  --color-tac09-ink: oklch(0.18 0.006 60);
  --color-tac09-quiet: #3b3631;
  --color-tac09-quiet: oklch(0.34 0.012 60);
  --color-tac09-mut: #5f5850;
  --color-tac09-mut: oklch(0.46 0.015 65);
  --color-tac09-acc: #ff5a1f;
  --color-tac09-acc: oklch(0.68 0.21 38);
  --color-tac09-acc-ink: #b53a0c;
  --color-tac09-acc-ink: oklch(0.52 0.17 38);
  --font-tac09-sans: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-tac09-mono: 'Geist Mono', ui-monospace, monospace;
}
/* 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. */

.tac-09 {
  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-tac09-bg: #f4efe4;
  --color-tac09-bg: oklch(0.955 0.015 85);
  --color-tac09-ink: #141210;
  --color-tac09-ink: oklch(0.18 0.006 60);
  --color-tac09-quiet: #3b3631;
  --color-tac09-quiet: oklch(0.34 0.012 60);
  --color-tac09-mut: #5f5850;
  --color-tac09-mut: oklch(0.46 0.015 65);
  --color-tac09-acc: #ff5a1f;
  --color-tac09-acc: oklch(0.68 0.21 38);
  --color-tac09-acc-ink: #b53a0c;
  --color-tac09-acc-ink: oklch(0.52 0.17 38);
  --font-tac09-sans: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-tac09-mono: 'Geist Mono', ui-monospace, monospace;
}
/* 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. */

.tac-09 {
  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=Archivo:wdth,wght@62..125,400..900&family=Geist+Mono:wght@400..600&display=swap">

What changed in the port

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

  • The two ::before/::after bars became two spans with inset-0 m-auto centring, so group-open:rotate-90 (the fold) and the key's group-open:rotate-180 (the spin) are visible in the markup that moves.
  • Nothing stayed CSS: the height animation that needed a stylesheet in earlier collections now uses v4's details-content: variant plus an arbitrary [interpolate-size:allow-keywords] on the root.
  • UI upgrade from the CSS original: the generic green card list became a Swiss foundry licensing page — condensed black display heading, mono index numbers, 2px ink rules and a stat strip — and the icon now sits in a 44px square key that flips from ink to signal orange as it folds.
  • UI upgrade: the panel now animates closed as well as open (the original only faded in), the open question switches to a darker acc-ink (4.9:1 on ivory) and the focus ring is a 3px orange outline offset clear of the rules.
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 Accordion with Plus Minus Icon Animation
Source: https://codefronts.com/navigation/tailwind-css-accordions/tailwind-accordion-plus-minus-icon-animation/

The plus that folds into a minus, ported into utilities: two <span> bars inside a square key, the vertical one turning group-open:rotate-90 onto the horizontal while the whole key spins group-open:rotate-180 on a springy curve. Set as a bold Swiss type-foundry licensing FAQ in warm ivory, ink black and signal orange &mdash; with a two-way height animation from the details-content: variant.
## HTML
```html
<section class="tac-09 w-full min-h-svh grid place-items-center bg-tac09-bg px-5 py-14 font-tac09-sans text-tac09-ink [interpolate-size:allow-keywords]" aria-label="Plus minus icon accordion demo">
  <div class="grid w-full justify-items-center gap-8">
    <div class="grid w-full max-w-5xl gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
      <header class="flex flex-col gap-6 lg:pt-1">
        <p class="flex items-center gap-2.5 font-tac09-mono text-xs font-medium tracking-[0.14em] uppercase text-tac09-mut"><span aria-hidden="true" class="size-2.5 rounded-full bg-tac09-acc"></span>Grotesk Foundry · Licensing</p>
        <h2 class="text-[clamp(44px,7vw,76px)] leading-[0.9] font-black tracking-[-0.045em] [font-stretch:88%]">Licences,<br>plainly<span class="text-tac09-acc">.</span></h2>
        <p class="max-w-sm text-[15.5px] leading-[1.6] text-tac09-mut text-pretty">One licence per family, scaled by team size. No page-view meters, no surprise renewals. If something isn't covered here, a type designer answers within a day.</p>
        <dl class="grid max-w-sm grid-cols-3 border-t-2 border-tac09-ink pt-4">
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Families</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">48</dd></div>
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Styles</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">612</dd></div>
          <div><dt class="font-tac09-mono text-[11px] tracking-[0.1em] uppercase text-tac09-mut">Reply</dt><dd class="mt-1 text-2xl font-extrabold tracking-tight">&lt;24h</dd></div>
        </dl>
      </header>

      <div class="border-b-2 border-tac09-ink">
        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none" open>
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">01</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Can I use the fonts in a logo?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Yes &mdash; every desktop licence includes logos and wordmarks at no extra cost, including trademark registration. Outlines may be modified, but you can't redistribute the edited font files.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">02</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">How are web licences counted?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">By domain, not traffic. One web licence covers a production domain plus unlimited staging and preview URLs. Self-host the WOFF2 files &mdash; we never ping a tracking server.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">03</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Do you offer student and nonprofit pricing?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Students get any family free for non-commercial work with a university email. Registered nonprofits take 50% off every plan &mdash; send your registration number and we'll issue a code the same day.</p>
          </div>
        </details>

        <details class="group border-t-2 border-tac09-ink details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-500 details-content:ease-[cubic-bezier(.2,.7,.2,1)] open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-11 cursor-pointer list-none items-center gap-4 py-5 outline-none select-none focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-tac09-acc sm:gap-6 [&::-webkit-details-marker]:hidden">
            <span class="w-7 flex-none font-tac09-mono text-sm font-medium text-tac09-mut transition-colors group-open:text-tac09-acc-ink">04</span>
            <span class="flex-1 text-[clamp(18px,2.2vw,22px)] leading-tight font-bold tracking-[-0.02em] transition-colors group-hover:text-tac09-acc-ink group-open:text-tac09-acc-ink">Can I upgrade my team size later?</span>
            <span aria-hidden="true" class="relative grid size-11 flex-none place-items-center bg-tac09-ink text-tac09-bg transition-[transform,background-color,color] duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180 group-open:bg-tac09-acc group-open:text-tac09-ink motion-reduce:transition-none">
              <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
              <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current transition-transform duration-500 ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-90 motion-reduce:transition-none"></span>
            </span>
          </summary>
          <div class="pr-4 pb-7 pl-11 sm:pr-17 sm:pl-13">
            <p class="text-[15.5px] leading-[1.65] text-tac09-quiet text-pretty">Anytime. You only pay the difference between tiers, prorated to the day, and the new seat count applies to every family you already own.</p>
          </div>
        </details>
      </div>
    </div>
    <p aria-hidden="true" class="border-2 border-tac09-ink px-3.5 py-2 font-tac09-mono text-[11.5px] text-tac09-ink">group-open:rotate-90 · group-open:rotate-180 · open:details-content:h-auto</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tac09-bg: #f4efe4;
  --color-tac09-bg: oklch(0.955 0.015 85);
  --color-tac09-ink: #141210;
  --color-tac09-ink: oklch(0.18 0.006 60);
  --color-tac09-quiet: #3b3631;
  --color-tac09-quiet: oklch(0.34 0.012 60);
  --color-tac09-mut: #5f5850;
  --color-tac09-mut: oklch(0.46 0.015 65);
  --color-tac09-acc: #ff5a1f;
  --color-tac09-acc: oklch(0.68 0.21 38);
  --color-tac09-acc-ink: #b53a0c;
  --color-tac09-acc-ink: oklch(0.52 0.17 38);
  --font-tac09-sans: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-tac09-mono: 'Geist Mono', ui-monospace, monospace;
}
/* 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. */

.tac-09 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two bars, one transform. The CSS original drew the bars with ::before/::after; here they are two absolutely centred spans so each carries its own utilities. Only the vertical bar moves:

<span class="relative size-11 transition-transform duration-500
  ease-[cubic-bezier(.3,1.5,.45,1)] group-open:rotate-180">
  <span class="absolute inset-0 m-auto h-[3px] w-4 bg-current"></span>
  <span class="absolute inset-0 m-auto h-4 w-[3px] bg-current
    transition-transform group-open:rotate-90"></span>
</span>

The panel is a pseudo-element, and v4 has a variant for it. details-content: targets ::details-content, so details-content:h-0 open:details-content:h-auto details-content:transition-[height,content-visibility] details-content:transition-discrete animates the height to auto once the root opts in with [interpolate-size:allow-keywords]. Browsers without either simply open instantly.

Make it yours

  • Calmer fold: drop group-open:rotate-180 from the key and keep only the bar's rotate-90.
  • Thinner icon: swap h-[3px]/w-[3px] for h-0.5/w-0.5 and shrink the bars to w-3.5/h-3.5.
  • Exclusive mode: give every <details> the same name="tac09-faq" and the browser closes the others.
  • Re-brand: edit --color-tac09-acc — key, index number, rules and hover ink all follow.

Gotchas — read before shipping

  • Rotate the vertical bar onto the horizontal — fading it out breaks the continuity that makes the morph read as one object.
  • Both bars need inset-0 m-auto (true centring) or the fold wobbles off-axis; a translate-based centre fights the rotate utility's transform.
  • open:details-content:h-auto must be written in that order — the pseudo-element variant has to be the last one in the stack.
  • Orange on ivory is only 3.2:1, so the open question uses the darker acc-ink token for text and keeps the bright orange for the key fill.

Browser support

ChromeSafariFirefoxEdge
129+not yetnot yet129+

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

The icon morph is plain transforms. The height animation needs ::details-content + interpolate-size (Chrome 131+); Safari and Firefox open the panel instantly, which is still correct.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →