32 Tailwind CSS Accordions — Vertical & Horizontal
07 / 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

Minimal Tailwind Accordion with Animated Underline

An editorial, box-free accordion for studios and portfolios: oversized serif questions on warm paper, separated only by hairlines. State is a rule that draws itself across the row — after:scale-x-0 after:origin-left to group-open:after:scale-x-100 — previewed at low opacity on hover, while the italic index letter fills from outline to vermilion and a thin plus turns into a cross.

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-07 w-full min-h-svh grid place-items-center bg-tac07-bg bg-[radial-gradient(90%_60%_at_80%_0%,var(--color-tac07-glow),transparent_70%)] px-5 py-16 font-tac07-sans text-tac07-ink" aria-label="Minimal editorial accordion with animated underline demo">
  <div class="grid w-full justify-items-center gap-10">
    <article class="w-full max-w-3xl">
      <header>
        <div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 border-b-2 border-tac07-ink pb-3 text-[11.5px] font-semibold tracking-[0.22em] uppercase text-tac07-mut">
          <span>Field Notes</span>
          <span>№ 4 · Autumn 2026</span>
        </div>
        <h2 class="mt-9 font-tac07-serif text-[clamp(44px,8vw,80px)] leading-[0.92] tracking-[-0.025em]">Questions, <em class="text-tac07-acc">answered.</em></h2>
        <p class="mt-5 max-w-[46ch] text-[15.5px] leading-relaxed text-tac07-mut">Four things people ask before the first call with Ørsted &amp; Vale &mdash; and the honest answers we give them.</p>
      </header>

      <div class="mt-12 border-b border-tac07-rule">
        <details class="group border-t border-tac07-rule" open>
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">a</i>
            <span class="min-w-0 flex-1 text-balance">What does the studio actually make?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Identity systems, editorial websites and the occasional typeface. We take four projects a year and finish all four &mdash; the constraint is the offer.</p>
            <p class="mt-4 font-tac07-mono text-xs tracking-wide text-tac07-mut">Recent: Halden Press · Nordlys Ferries · Common Hours</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">b</i>
            <span class="min-w-0 flex-1 text-balance">How does an engagement begin?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">With a two-week discovery sprint: interviews, an audit, and a written point of view. If we turn out to be wrong for each other, you keep the document and we part as friends.</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">c</i>
            <span class="min-w-0 flex-1 text-balance">Do you work with early-stage teams?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Two of our four annual slots are reserved for pre-seed and seed companies at a reduced rate. Bring conviction; the deck can be ugly.</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">d</i>
            <span class="min-w-0 flex-1 text-balance">Where are you based?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Copenhagen and Toronto, and the six hours of overlap between them. Everything ships from a shared repository and a long-running phone call.</p>
          </div>
        </details>
      </div>

      <footer class="mt-8 flex flex-wrap items-center justify-between gap-4 text-[15px] text-tac07-mut">
        <p>Something we didn't cover?</p>
        <button type="button" class="group/cta relative inline-flex min-h-11 items-center gap-2 font-semibold text-tac07-ink after:absolute after:inset-x-0 after:bottom-2.5 after:h-px after:origin-right after:scale-x-0 after:bg-tac07-acc after:transition-[scale] after:duration-500 hover:after:origin-left hover:after:scale-x-100 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink motion-reduce:after:transition-none">Write to the studio <span aria-hidden="true" class="transition-transform duration-300 group-hover/cta:translate-x-1 motion-reduce:transition-none">→</span></button>
      </footer>
    </article>
    <p aria-hidden="true" class="rounded-full border border-tac07-rule bg-tac07-paper px-3.5 py-2 text-center font-tac07-mono text-[11.5px] text-tac07-mut">after:origin-left · after:scale-x-0 → group-open:after:scale-x-100</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tac07-bg: #f9f5ec;
  --color-tac07-bg: oklch(0.97 0.012 85);
  --color-tac07-glow: #fefcf7;
  --color-tac07-glow: oklch(0.99 0.006 85);
  --color-tac07-paper: #fefcf7;
  --color-tac07-paper: oklch(0.99 0.006 85);
  --color-tac07-ink: #1a1511;
  --color-tac07-ink: oklch(0.2 0.012 60);
  --color-tac07-body: #433c36;
  --color-tac07-body: oklch(0.36 0.014 60);
  --color-tac07-mut: #625952;
  --color-tac07-mut: oklch(0.47 0.016 60);
  --color-tac07-rule: #d9d2c6;
  --color-tac07-rule: oklch(0.87 0.016 78);
  --color-tac07-acc: #c8331a;
  --color-tac07-acc: oklch(0.55 0.19 32);
  --font-tac07-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-tac07-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tac07-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --animate-tac07-rise: tac07-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);

  @keyframes tac07-rise {
    from {
      opacity: 0;
      translate: 0 8px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}
/* 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-07 {
  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-tac07-bg: #f9f5ec;
  --color-tac07-bg: oklch(0.97 0.012 85);
  --color-tac07-glow: #fefcf7;
  --color-tac07-glow: oklch(0.99 0.006 85);
  --color-tac07-paper: #fefcf7;
  --color-tac07-paper: oklch(0.99 0.006 85);
  --color-tac07-ink: #1a1511;
  --color-tac07-ink: oklch(0.2 0.012 60);
  --color-tac07-body: #433c36;
  --color-tac07-body: oklch(0.36 0.014 60);
  --color-tac07-mut: #625952;
  --color-tac07-mut: oklch(0.47 0.016 60);
  --color-tac07-rule: #d9d2c6;
  --color-tac07-rule: oklch(0.87 0.016 78);
  --color-tac07-acc: #c8331a;
  --color-tac07-acc: oklch(0.55 0.19 32);
  --font-tac07-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-tac07-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tac07-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --animate-tac07-rise: tac07-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);

  @keyframes tac07-rise {
    from {
      opacity: 0;
      translate: 0 8px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}
/* 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-07 {
  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=Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap">

What changed in the port

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

  • The original's .q::after rule and its hover/open variants became after:, hover:after: and group-open:after: utilities on the summary; @keyframes acc-07-in moved into @theme as --animate-tac07-rise.
  • Nothing stayed CSS beyond tokens, the keyframe and the root rule — the outline index letter is an arbitrary [-webkit-text-stroke:…] property.
  • UI upgrade from the CSS original: a real editorial masthead (double-weight top rule, issue line, an 80px Instrument Serif headline with a vermilion italic), a hairline plus that rotates into a cross as a non-colour state cue, a client line under the first answer and a footer CTA whose own underline draws on hover.
  • UI upgrade: the index letter fills from outline to vermilion, answers drop their indent on phones so the measure stays readable at 390px, and muted copy is 6.5:1 on the paper.
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: Minimal Tailwind Accordion with Animated Underline
Source: https://codefronts.com/navigation/tailwind-css-accordions/minimal-tailwind-accordion-animated-underline/

An editorial, box-free accordion for studios and portfolios: oversized serif questions on warm paper, separated only by hairlines. State is a rule that draws itself across the row &mdash; after:scale-x-0 after:origin-left to group-open:after:scale-x-100 &mdash; previewed at low opacity on hover, while the italic index letter fills from outline to vermilion and a thin plus turns into a cross.
## HTML
```html
<section class="tac-07 w-full min-h-svh grid place-items-center bg-tac07-bg bg-[radial-gradient(90%_60%_at_80%_0%,var(--color-tac07-glow),transparent_70%)] px-5 py-16 font-tac07-sans text-tac07-ink" aria-label="Minimal editorial accordion with animated underline demo">
  <div class="grid w-full justify-items-center gap-10">
    <article class="w-full max-w-3xl">
      <header>
        <div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 border-b-2 border-tac07-ink pb-3 text-[11.5px] font-semibold tracking-[0.22em] uppercase text-tac07-mut">
          <span>Field Notes</span>
          <span>№ 4 · Autumn 2026</span>
        </div>
        <h2 class="mt-9 font-tac07-serif text-[clamp(44px,8vw,80px)] leading-[0.92] tracking-[-0.025em]">Questions, <em class="text-tac07-acc">answered.</em></h2>
        <p class="mt-5 max-w-[46ch] text-[15.5px] leading-relaxed text-tac07-mut">Four things people ask before the first call with Ørsted &amp; Vale &mdash; and the honest answers we give them.</p>
      </header>

      <div class="mt-12 border-b border-tac07-rule">
        <details class="group border-t border-tac07-rule" open>
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">a</i>
            <span class="min-w-0 flex-1 text-balance">What does the studio actually make?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Identity systems, editorial websites and the occasional typeface. We take four projects a year and finish all four &mdash; the constraint is the offer.</p>
            <p class="mt-4 font-tac07-mono text-xs tracking-wide text-tac07-mut">Recent: Halden Press · Nordlys Ferries · Common Hours</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">b</i>
            <span class="min-w-0 flex-1 text-balance">How does an engagement begin?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">With a two-week discovery sprint: interviews, an audit, and a written point of view. If we turn out to be wrong for each other, you keep the document and we part as friends.</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">c</i>
            <span class="min-w-0 flex-1 text-balance">Do you work with early-stage teams?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Two of our four annual slots are reserved for pre-seed and seed companies at a reduced rate. Bring conviction; the deck can be ugly.</p>
          </div>
        </details>

        <details class="group border-t border-tac07-rule">
          <summary class="relative flex min-h-11 cursor-pointer list-none items-baseline gap-[clamp(12px,2.5vw,22px)] py-[clamp(20px,3vw,28px)] pe-1 font-tac07-serif text-[clamp(24px,3.8vw,36px)] leading-[1.15] tracking-[-0.012em] outline-none after:absolute after:inset-x-0 after:-bottom-px after:h-[1.5px] after:origin-left after:scale-x-0 after:bg-tac07-ink after:transition-[scale,opacity] after:duration-700 after:ease-[cubic-bezier(0.65,0,0.2,1)] hover:after:scale-x-100 hover:after:opacity-25 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink group-open:after:scale-x-100 group-open:after:opacity-100! motion-reduce:after:transition-none [&::-webkit-details-marker]:hidden">
            <i aria-hidden="true" class="w-[1.1em] flex-none text-[0.72em] text-transparent transition-colors duration-500 [-webkit-text-stroke:1px_var(--color-tac07-mut)] group-open:text-tac07-acc group-open:[-webkit-text-stroke:0]">d</i>
            <span class="min-w-0 flex-1 text-balance">Where are you based?</span>
            <span aria-hidden="true" class="relative ms-2 size-5 flex-none self-center transition-transform duration-500 ease-[cubic-bezier(0.65,0,0.2,1)] before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-tac07-ink after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-tac07-ink group-open:rotate-45 motion-reduce:transition-none"></span>
          </summary>
          <div class="pb-9 pt-6 ps-[calc(clamp(24px,3.8vw,36px)*0.792+clamp(12px,2.5vw,22px))] group-open:animate-tac07-rise motion-reduce:animate-none max-sm:ps-0">
            <p class="max-w-[60ch] text-base leading-[1.75] text-tac07-body text-pretty">Copenhagen and Toronto, and the six hours of overlap between them. Everything ships from a shared repository and a long-running phone call.</p>
          </div>
        </details>
      </div>

      <footer class="mt-8 flex flex-wrap items-center justify-between gap-4 text-[15px] text-tac07-mut">
        <p>Something we didn't cover?</p>
        <button type="button" class="group/cta relative inline-flex min-h-11 items-center gap-2 font-semibold text-tac07-ink after:absolute after:inset-x-0 after:bottom-2.5 after:h-px after:origin-right after:scale-x-0 after:bg-tac07-acc after:transition-[scale] after:duration-500 hover:after:origin-left hover:after:scale-x-100 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tac07-ink motion-reduce:after:transition-none">Write to the studio <span aria-hidden="true" class="transition-transform duration-300 group-hover/cta:translate-x-1 motion-reduce:transition-none">→</span></button>
      </footer>
    </article>
    <p aria-hidden="true" class="rounded-full border border-tac07-rule bg-tac07-paper px-3.5 py-2 text-center font-tac07-mono text-[11.5px] text-tac07-mut">after:origin-left · after:scale-x-0 → group-open:after:scale-x-100</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tac07-bg: #f9f5ec;
  --color-tac07-bg: oklch(0.97 0.012 85);
  --color-tac07-glow: #fefcf7;
  --color-tac07-glow: oklch(0.99 0.006 85);
  --color-tac07-paper: #fefcf7;
  --color-tac07-paper: oklch(0.99 0.006 85);
  --color-tac07-ink: #1a1511;
  --color-tac07-ink: oklch(0.2 0.012 60);
  --color-tac07-body: #433c36;
  --color-tac07-body: oklch(0.36 0.014 60);
  --color-tac07-mut: #625952;
  --color-tac07-mut: oklch(0.47 0.016 60);
  --color-tac07-rule: #d9d2c6;
  --color-tac07-rule: oklch(0.87 0.016 78);
  --color-tac07-acc: #c8331a;
  --color-tac07-acc: oklch(0.55 0.19 32);
  --font-tac07-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-tac07-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-tac07-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --animate-tac07-rise: tac07-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);

  @keyframes tac07-rise {
    from {
      opacity: 0;
      translate: 0 8px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}
/* 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-07 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The rule lives on the summary, not the item. A pseudo-element pinned to the summary's bottom edge is scaled to zero from the left, so it always spans exactly the question row — it never stretches when the answer opens beneath it:

<summary class="relative after:absolute after:inset-x-0 after:bottom-0
  after:h-[1.5px] after:bg-tac07-ink after:origin-left after:scale-x-0
  after:transition-[scale,opacity] after:duration-700
  hover:after:scale-x-100 hover:after:opacity-25
  group-open:after:scale-x-100 group-open:after:opacity-100">

Two cues, never colour alone. Opening a row draws the full-strength rule (motion and weight) and rotates the hairline plus 45° into a cross; the index letter switching from an outline to solid vermilion is the third, decorative cue. Under motion-reduce: the transitions and the entrance keyframe are dropped but the final drawn state still shows.

Make it yours

  • Rule weight: after:h-[1.5px] → after:h-0.5 for a bolder masthead stroke, or tint it with after:bg-tac07-acc.
  • Draw from the centre: swap after:origin-left for after:origin-center.
  • Index style: the letters are markup — use i., 01 or section names; the outline-to-fill effect works on any glyph.
  • Bigger drama: raise the question's text-[clamp(24px,3.8vw,36px)] ceiling; keep questions under two lines for rhythm.

Gotchas — read before shipping

  • Minimal is not invisible: without the hover pre-draw and the plus, bare serif lines fail discoverability tests — keep at least one affordance.
  • scale-x-* in v4 sets the scale property, not transform, so transition scale (as here) — transition-transform also covers it, but transition-[transform] alone does not.
  • -webkit-text-stroke outlines are thin at small sizes; keep the index at least ~18px or swap to a muted fill.
  • Hovering an open row would dim its rule back to 25%: hover: and group-open: carry equal specificity and Tailwind emits hover: later, so the open opacity is written group-open:after:opacity-100! (v4's trailing important modifier).
  • Serif body copy below 15px gets muddy on low-DPI screens; answers here stay at 16px.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Transforms, details/summary and -webkit-text-stroke are universal; the floor is Tailwind v4's own sheet (cascade layers, @property, color-mix()).

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗transform origintw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →