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

Brutalist Tailwind CSS Accordion

Neo-brutalism for disclosure: 3px ink borders, zero-blur offset shadows written as shadow-[6px_6px_0_var(--color-tac11-ink)], and an open state that physically presses the slab into the page — open:translate-x-1 open:translate-y-1 while the shadow shrinks by the same 4px. Each question owns a loud colour (yellow, hot pink, cyan) that floods its index chip and arrow key on open. A zine FAQ with ruled-paper answers.

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-11 w-full min-h-svh grid place-items-center bg-tac11-bg bg-[radial-gradient(var(--color-tac11-ink)_1px,transparent_1.5px)] bg-size-[22px_22px] px-5 py-14 font-tac11-mono text-tac11-ink [interpolate-size:allow-keywords]" aria-label="Brutalist accordion demo">
  <div class="grid w-full justify-items-center gap-9">
    <div class="w-full max-w-[600px]">
      <header class="relative mb-9 border-3 border-tac11-ink bg-white px-5 py-5 shadow-[6px_6px_0_var(--color-tac11-ink)] sm:px-6">
        <span class="absolute -top-4 right-4 rotate-3 border-3 border-tac11-ink bg-tac11-pink px-2.5 py-1 text-xs font-bold tracking-[0.12em] uppercase">Issue #47</span>
        <p class="text-xs font-bold tracking-[0.18em] uppercase">The Unpolished Web · zine</p>
        <h2 class="mt-1 font-tac11-display text-[clamp(44px,9vw,68px)] leading-[0.95] font-extrabold tracking-[-0.04em]">FAQ<span class="text-tac11-pink [-webkit-text-stroke:2px_var(--color-tac11-ink)]">_</span></h2>
        <p class="mt-2 max-w-md text-sm leading-6">Questions people actually email us. Printed badly on purpose.</p>
      </header>

      <div class="flex flex-col gap-5">
        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none" open>
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-yellow">01</span>
            <span class="flex-1">What is this?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-yellow motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">A weekly zine about the unpolished web — view-source culture, personal sites and software with opinions. One issue, every Friday, no tracking pixels.</p>
          </div>
        </details>

        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-pink">02</span>
            <span class="flex-1">How much?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-pink motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">Free online, forever. The paper edition is $5 — photocopied, stapled crooked and mailed with a sticker you will put on your laptop.</p>
          </div>
        </details>

        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-cyan">03</span>
            <span class="flex-1">Can I submit?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-cyan motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">Yes. 500 words max, no pitches, no PDFs. Send plain text or a URL. If your site needs a cookie banner, it's a no.</p>
          </div>
        </details>
      </div>

      <div class="mt-9 flex flex-wrap items-center gap-4">
        <a href="#tac11-subscribe" id="tac11-subscribe" class="inline-flex min-h-12 items-center gap-2.5 border-3 border-tac11-ink bg-tac11-pink px-5 text-sm font-bold tracking-[0.1em] uppercase shadow-[5px_5px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-100 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-tac11-ink)] active:translate-x-1 active:translate-y-1 active:shadow-[1px_1px_0_var(--color-tac11-ink)] focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink motion-reduce:transition-none">Get the paper — $5<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M2.5 8h10M8.5 3.5 13 8l-4.5 4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></a>
        <p class="bg-tac11-ink px-2.5 py-1.5 text-xs font-bold tracking-[0.1em] text-tac11-yellow uppercase">2,914 readers · 0 ads</p>
      </div>
    </div>
    <p aria-hidden="true" class="border-3 border-tac11-ink bg-white px-3.5 py-2 text-center text-[11.5px]">open:translate-x-1 · open:shadow-[2px_2px_0_…] · group-open:rotate-180</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tac11-bg: #ffe14d;
  --color-tac11-bg: oklch(0.91 0.17 98);
  --color-tac11-ink: #111111;
  --color-tac11-ink: oklch(0.18 0 0);
  --color-tac11-yellow: #ffe14d;
  --color-tac11-yellow: oklch(0.91 0.17 98);
  --color-tac11-pink: #ff6bb5;
  --color-tac11-pink: oklch(0.73 0.2 350);
  --color-tac11-cyan: #3ee0f0;
  --color-tac11-cyan: oklch(0.84 0.13 205);
  --color-tac11-rule: #e9e3cf;
  --color-tac11-rule: oklch(0.92 0.025 95);
  --font-tac11-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-tac11-mono: 'Space Mono', ui-monospace, 'Cascadia Code', Menlo, 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-11 {
  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-tac11-bg: #ffe14d;
  --color-tac11-bg: oklch(0.91 0.17 98);
  --color-tac11-ink: #111111;
  --color-tac11-ink: oklch(0.18 0 0);
  --color-tac11-yellow: #ffe14d;
  --color-tac11-yellow: oklch(0.91 0.17 98);
  --color-tac11-pink: #ff6bb5;
  --color-tac11-pink: oklch(0.73 0.2 350);
  --color-tac11-cyan: #3ee0f0;
  --color-tac11-cyan: oklch(0.84 0.13 205);
  --color-tac11-rule: #e9e3cf;
  --color-tac11-rule: oklch(0.92 0.025 95);
  --font-tac11-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-tac11-mono: 'Space Mono', ui-monospace, 'Cascadia Code', Menlo, 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-11 {
  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=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Mono:wght@400;700&display=swap">

What changed in the port

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

  • box-shadow:var(--shadow) var(--shadow) 0 var(--ink) became shadow-[6px_6px_0_var(--color-tac11-ink)], and the original's [open]{translate:4px 4px} is open:translate-x-1 open:translate-y-1 on the same element — the press is legible in one class list.
  • Nothing stayed CSS: the ruled paper, dotted page, text stroke and height animation are all arbitrary values or variants.
  • UI upgrade from the CSS original: one yellow became a three-colour system — each question floods its arrow key in yellow, pink or cyan on open, with the index chip inverting to ink — plus a halftone dot page, a masthead slab with a rotated &ldquo;Issue #47&rdquo; sticker and a pink CTA that presses on active:.
  • UI upgrade: the text arrow (▼, font-dependent) became a square-capped SVG in a 40px key, the ruled lines now align to the copy's 28px leading, and the panel animates both ways.
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: Brutalist Tailwind CSS Accordion
Source: https://codefronts.com/navigation/tailwind-css-accordions/brutalist-tailwind-css-accordion/

Neo-brutalism for disclosure: 3px ink borders, zero-blur offset shadows written as shadow-[6px_6px_0_var(--color-tac11-ink)], and an open state that physically presses the slab into the page &mdash; open:translate-x-1 open:translate-y-1 while the shadow shrinks by the same 4px. Each question owns a loud colour (yellow, hot pink, cyan) that floods its index chip and arrow key on open. A zine FAQ with ruled-paper answers.
## HTML
```html
<section class="tac-11 w-full min-h-svh grid place-items-center bg-tac11-bg bg-[radial-gradient(var(--color-tac11-ink)_1px,transparent_1.5px)] bg-size-[22px_22px] px-5 py-14 font-tac11-mono text-tac11-ink [interpolate-size:allow-keywords]" aria-label="Brutalist accordion demo">
  <div class="grid w-full justify-items-center gap-9">
    <div class="w-full max-w-[600px]">
      <header class="relative mb-9 border-3 border-tac11-ink bg-white px-5 py-5 shadow-[6px_6px_0_var(--color-tac11-ink)] sm:px-6">
        <span class="absolute -top-4 right-4 rotate-3 border-3 border-tac11-ink bg-tac11-pink px-2.5 py-1 text-xs font-bold tracking-[0.12em] uppercase">Issue #47</span>
        <p class="text-xs font-bold tracking-[0.18em] uppercase">The Unpolished Web · zine</p>
        <h2 class="mt-1 font-tac11-display text-[clamp(44px,9vw,68px)] leading-[0.95] font-extrabold tracking-[-0.04em]">FAQ<span class="text-tac11-pink [-webkit-text-stroke:2px_var(--color-tac11-ink)]">_</span></h2>
        <p class="mt-2 max-w-md text-sm leading-6">Questions people actually email us. Printed badly on purpose.</p>
      </header>

      <div class="flex flex-col gap-5">
        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none" open>
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-yellow">01</span>
            <span class="flex-1">What is this?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-yellow motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">A weekly zine about the unpolished web — view-source culture, personal sites and software with opinions. One issue, every Friday, no tracking pixels.</p>
          </div>
        </details>

        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-pink">02</span>
            <span class="flex-1">How much?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-pink motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">Free online, forever. The paper edition is $5 — photocopied, stapled crooked and mailed with a sticker you will put on your laptop.</p>
          </div>
        </details>

        <details class="group border-3 border-tac11-ink bg-white shadow-[6px_6px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-150 ease-out hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_var(--color-tac11-ink)] open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_var(--color-tac11-ink)] motion-reduce:transition-none details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-out open:details-content:h-auto motion-reduce:details-content:transition-none">
          <summary class="flex min-h-16 cursor-pointer list-none items-center gap-4 px-4 py-3 text-[15px] font-bold tracking-[0.08em] uppercase select-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink [&::-webkit-details-marker]:hidden">
            <span class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white text-sm transition-colors duration-150 group-open:bg-tac11-ink group-open:text-tac11-cyan">03</span>
            <span class="flex-1">Can I submit?</span>
            <span aria-hidden="true" class="grid size-10 flex-none place-items-center border-3 border-tac11-ink bg-white transition-[rotate,background-color] duration-200 ease-out group-open:rotate-180 group-open:bg-tac11-cyan motion-reduce:transition-none"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M8 2.5v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></span>
          </summary>
          <div class="border-t-3 border-tac11-ink bg-[repeating-linear-gradient(180deg,transparent_0_27px,var(--color-tac11-rule)_27px_28px)] bg-origin-content bg-white px-4 pt-3.5 pb-4 sm:pl-[4.5rem]">
            <p class="text-sm leading-7">Yes. 500 words max, no pitches, no PDFs. Send plain text or a URL. If your site needs a cookie banner, it's a no.</p>
          </div>
        </details>
      </div>

      <div class="mt-9 flex flex-wrap items-center gap-4">
        <a href="#tac11-subscribe" id="tac11-subscribe" class="inline-flex min-h-12 items-center gap-2.5 border-3 border-tac11-ink bg-tac11-pink px-5 text-sm font-bold tracking-[0.1em] uppercase shadow-[5px_5px_0_var(--color-tac11-ink)] transition-[translate,box-shadow] duration-100 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_var(--color-tac11-ink)] active:translate-x-1 active:translate-y-1 active:shadow-[1px_1px_0_var(--color-tac11-ink)] focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-tac11-ink motion-reduce:transition-none">Get the paper — $5<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M2.5 8h10M8.5 3.5 13 8l-4.5 4.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="square"/></svg></a>
        <p class="bg-tac11-ink px-2.5 py-1.5 text-xs font-bold tracking-[0.1em] text-tac11-yellow uppercase">2,914 readers · 0 ads</p>
      </div>
    </div>
    <p aria-hidden="true" class="border-3 border-tac11-ink bg-white px-3.5 py-2 text-center text-[11.5px]">open:translate-x-1 · open:shadow-[2px_2px_0_…] · group-open:rotate-180</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tac11-bg: #ffe14d;
  --color-tac11-bg: oklch(0.91 0.17 98);
  --color-tac11-ink: #111111;
  --color-tac11-ink: oklch(0.18 0 0);
  --color-tac11-yellow: #ffe14d;
  --color-tac11-yellow: oklch(0.91 0.17 98);
  --color-tac11-pink: #ff6bb5;
  --color-tac11-pink: oklch(0.73 0.2 350);
  --color-tac11-cyan: #3ee0f0;
  --color-tac11-cyan: oklch(0.84 0.13 205);
  --color-tac11-rule: #e9e3cf;
  --color-tac11-rule: oklch(0.92 0.025 95);
  --font-tac11-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-tac11-mono: 'Space Mono', ui-monospace, 'Cascadia Code', Menlo, 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-11 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The press is two utilities moving by the same amount. The slab's resting shadow sits 6px out; on open it travels 4px down-right with translate and the shadow pulls in to 2px, so its outer edge never moves — the card reads as a key pushed into the page:

<details class="group border-3 border-tac11-ink bg-white
  shadow-[6px_6px_0_var(--color-tac11-ink)]
  transition-[translate,box-shadow] duration-150
  hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[4px_4px_0_…]
  open:translate-x-1 open:translate-y-1 open:shadow-[2px_2px_0_…]">

No blur, no radius, no gradients on surfaces. The only gradient is the ruled-paper texture on the answer, built from repeating-linear-gradient in an arbitrary background value and lined up with the text's 28px leading-7, so every line of copy sits on a rule.

Make it yours

  • Deeper slabs: raise every shadow offset by the same step (8px rest, 4px hover, 2px open) and match the translates.
  • Lighter build: border-2 and a 4px shadow for denser product UI.
  • One accent only: replace the per-item group-open:bg-tac11-* classes with a single token for a calmer page.
  • Drop the ruled paper: delete the bg-[repeating-linear-gradient…] class on the panel.

Gotchas — read before shipping

  • Translate and shadow must change by the same amount, or the card visibly detaches from its shadow mid-press.
  • A single pixel of blur kills the look — keep the third shadow value at 0.
  • The yellow page is light: ink text and borders pass easily, but never set body copy in pink or cyan on white (2.4:1 and 1.6:1).
  • open:translate-* moves the summary's focus ring too — that's why the ring is an outline with outline-offset-4, so it stays clear of the shifted edge.

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+.

Borders, hard shadows and translate are baseline everywhere; the floor is Tailwind v4's own sheet. The panel height animation needs ::details-content + interpolate-size (Chrome 131+); elsewhere it opens instantly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →