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

Skewed Tailwind CSS Accordion with Slanted Headers

Headers as racing stripes: every summary is a -skew-x-12 parallelogram with its label counter-skewed by skew-x-12 so the type stays upright, stacked in a zigzag with alternating translate-x offsets. Opening a stripe squares it up (group-open:skew-x-0), floods it electric red and drops a hard offset shadow — the geometry itself is the state. An esports match-day guide on a dark speed-lined stage.

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-15 w-full min-h-svh grid place-items-center bg-tac15-bg bg-[radial-gradient(60%_45%_at_85%_10%,var(--color-tac15-glow),transparent_70%),repeating-linear-gradient(115deg,transparent_0_46px,oklch(1_0_0/0.025)_46px_48px)] px-5 py-14 font-tac15-sans text-tac15-ink [interpolate-size:allow-keywords]" aria-label="Skewed slanted header accordion demo">
  <div class="grid w-full max-w-xl gap-9">
    <header class="grid gap-4 px-3">
      <p class="flex items-center gap-2.5 font-tac15-mono text-[12px] font-bold tracking-[0.2em] text-tac15-hot uppercase"><span aria-hidden="true" class="h-2.5 w-6 -skew-x-12 bg-tac15-red"></span>Grand final · Fan guide</p>
      <h2 class="text-[clamp(34px,7vw,52px)] leading-[0.95] font-black tracking-[-0.02em] uppercase italic [font-stretch:112%]">Match day,<br>no surprises.</h2>
      <div class="flex w-fit -skew-x-12 items-center gap-4 bg-tac15-panel px-4 py-2 ring-1 ring-white/10">
        <span class="flex skew-x-12 items-center gap-3 font-tac15-mono text-[12.5px] font-bold tracking-wide uppercase"><span>Nova</span><span class="text-tac15-hot">vs</span><span>Kraken</span><span aria-hidden="true" class="h-3.5 w-px bg-white/20"></span><span class="whitespace-nowrap text-tac15-mut">Sat · 19:00<span class="max-sm:hidden"> · Arena 9</span></span></span>
      </div>
    </header>

    <div class="grid gap-4 px-3">
      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none" open>
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">01</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Tickets &amp; entry</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Digital tickets only. Add yours to your phone wallet before you reach the arena &mdash; signal drops once 18,000 fans are inside.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Gates</dt><dd class="mt-0.5 text-[17px] font-black italic">17:30</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Bag max</dt><dd class="mt-0.5 text-[17px] font-black italic">A4</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Re-entry</dt><dd class="mt-0.5 text-[17px] font-black italic">No</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block -translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">02</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Getting there</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">The Arena Line runs every 6 minutes from Central until 01:00. Riding in? Two thousand free, staffed bike racks wait at the north gate.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Metro</dt><dd class="mt-0.5 text-[17px] font-black italic">6 min</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Bikes</dt><dd class="mt-0.5 text-[17px] font-black italic">2,000</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Parking</dt><dd class="mt-0.5 text-[17px] font-black italic">P3</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">03</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Food &amp; merch</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Twelve local vendors line the main concourse. Team jerseys and the limited final-day hoodie sell out fast &mdash; the merch truck opens at 16:00.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Vendors</dt><dd class="mt-0.5 text-[17px] font-black italic">12</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Merch</dt><dd class="mt-0.5 text-[17px] font-black italic">16:00</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Cashless</dt><dd class="mt-0.5 text-[17px] font-black italic">Yes</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block -translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">04</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Accessibility</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Step-free routes from every gate, sensory kits at guest services and live audio-described commentary on channel 3 of the arena app.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Step-free</dt><dd class="mt-0.5 text-[17px] font-black italic">All</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Quiet room</dt><dd class="mt-0.5 text-[17px] font-black italic">L2</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Audio</dt><dd class="mt-0.5 text-[17px] font-black italic">Ch 3</dd></div>
          </dl>
        </div>
      </details>
    </div>

    <p aria-hidden="true" class="justify-self-center rounded-full px-3.5 py-2 text-center font-tac15-mono text-[11.5px] text-tac15-mut ring-1 ring-white/10">-skew-x-12 · skew-x-12 · group-open:skew-x-0</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tac15-bg: #100909;
  --color-tac15-bg: oklch(0.15 0.012 20);
  --color-tac15-glow: #a9000c59;
  --color-tac15-glow: oklch(0.45 0.2 25 / 0.35);
  --color-tac15-panel: #1e1616;
  --color-tac15-panel: oklch(0.21 0.014 20);
  --color-tac15-panel2: #291f1e;
  --color-tac15-panel2: oklch(0.25 0.016 20);
  --color-tac15-ink: #f8f4f4;
  --color-tac15-ink: oklch(0.97 0.005 20);
  --color-tac15-mut: #baadad;
  --color-tac15-mut: oklch(0.76 0.015 20);
  --color-tac15-red: #c5002b;
  --color-tac15-red: oklch(0.52 0.21 22);
  --color-tac15-red2: #d81327;
  --color-tac15-red2: oklch(0.56 0.22 25);
  --color-tac15-hot: #ff6a65;
  --color-tac15-hot: oklch(0.72 0.19 25);
  --color-tac15-deep: #800613;
  --color-tac15-deep: oklch(0.38 0.15 25);
  --font-tac15-sans: 'Archivo', system-ui, sans-serif;
  --font-tac15-mono: 'JetBrains 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-15 {
  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-tac15-bg: #100909;
  --color-tac15-bg: oklch(0.15 0.012 20);
  --color-tac15-glow: #a9000c59;
  --color-tac15-glow: oklch(0.45 0.2 25 / 0.35);
  --color-tac15-panel: #1e1616;
  --color-tac15-panel: oklch(0.21 0.014 20);
  --color-tac15-panel2: #291f1e;
  --color-tac15-panel2: oklch(0.25 0.016 20);
  --color-tac15-ink: #f8f4f4;
  --color-tac15-ink: oklch(0.97 0.005 20);
  --color-tac15-mut: #baadad;
  --color-tac15-mut: oklch(0.76 0.015 20);
  --color-tac15-red: #c5002b;
  --color-tac15-red: oklch(0.52 0.21 22);
  --color-tac15-red2: #d81327;
  --color-tac15-red2: oklch(0.56 0.22 25);
  --color-tac15-hot: #ff6a65;
  --color-tac15-hot: oklch(0.72 0.19 25);
  --color-tac15-deep: #800613;
  --color-tac15-deep: oklch(0.38 0.15 25);
  --font-tac15-sans: 'Archivo', system-ui, sans-serif;
  --font-tac15-mono: 'JetBrains 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-15 {
  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:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&family=JetBrains+Mono:wght@500;700&display=swap">

What changed in the port

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

  • transform:skewX(-6deg) / skewX(6deg) became the -skew-x-12 / skew-x-12 utility pair, and the :nth-child(odd of …) zigzag rules became plain translate-x-3 / -translate-x-3 classes on each stripe — no selectors left.
  • The color-mix() hard shadow became shadow-[6px_6px_0_…]; the open state's flat drop is group-open:shadow-[0_6px_0_var(--color-tac15-deep)]. The entrance keyframe was replaced by a two-way details-content: height tween, so the CSS is tokens only.
  • UI upgrade from the CSS original: the pastel four-colour stack on light grey became a single-team esports identity — near-black stage with diagonal speed lines and a red glow, a wide-italic Archivo display headline, a skewed fixture bar (Nova vs Kraken), mono item numbers and a three-stat strip in every panel.
  • UI upgrade: the items are now exclusive (<details name>), the focus ring follows the parallelogram instead of boxing it, the » glyph is a crisp SVG double chevron, and white-on-red text was darkened to 5.1:1 (the original's mid-red and yellow stripes failed at 3.2:1 and 1.9:1).
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: Skewed Tailwind CSS Accordion with Slanted Headers
Source: https://codefronts.com/navigation/tailwind-css-accordions/skewed-tailwind-css-accordion-slanted-headers/

Headers as racing stripes: every summary is a -skew-x-12 parallelogram with its label counter-skewed by skew-x-12 so the type stays upright, stacked in a zigzag with alternating translate-x offsets. Opening a stripe squares it up (group-open:skew-x-0), floods it electric red and drops a hard offset shadow &mdash; the geometry itself is the state. An esports match-day guide on a dark speed-lined stage.
## HTML
```html
<section class="tac-15 w-full min-h-svh grid place-items-center bg-tac15-bg bg-[radial-gradient(60%_45%_at_85%_10%,var(--color-tac15-glow),transparent_70%),repeating-linear-gradient(115deg,transparent_0_46px,oklch(1_0_0/0.025)_46px_48px)] px-5 py-14 font-tac15-sans text-tac15-ink [interpolate-size:allow-keywords]" aria-label="Skewed slanted header accordion demo">
  <div class="grid w-full max-w-xl gap-9">
    <header class="grid gap-4 px-3">
      <p class="flex items-center gap-2.5 font-tac15-mono text-[12px] font-bold tracking-[0.2em] text-tac15-hot uppercase"><span aria-hidden="true" class="h-2.5 w-6 -skew-x-12 bg-tac15-red"></span>Grand final · Fan guide</p>
      <h2 class="text-[clamp(34px,7vw,52px)] leading-[0.95] font-black tracking-[-0.02em] uppercase italic [font-stretch:112%]">Match day,<br>no surprises.</h2>
      <div class="flex w-fit -skew-x-12 items-center gap-4 bg-tac15-panel px-4 py-2 ring-1 ring-white/10">
        <span class="flex skew-x-12 items-center gap-3 font-tac15-mono text-[12.5px] font-bold tracking-wide uppercase"><span>Nova</span><span class="text-tac15-hot">vs</span><span>Kraken</span><span aria-hidden="true" class="h-3.5 w-px bg-white/20"></span><span class="whitespace-nowrap text-tac15-mut">Sat · 19:00<span class="max-sm:hidden"> · Arena 9</span></span></span>
      </div>
    </header>

    <div class="grid gap-4 px-3">
      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none" open>
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">01</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Tickets &amp; entry</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Digital tickets only. Add yours to your phone wallet before you reach the arena &mdash; signal drops once 18,000 fans are inside.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Gates</dt><dd class="mt-0.5 text-[17px] font-black italic">17:30</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Bag max</dt><dd class="mt-0.5 text-[17px] font-black italic">A4</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Re-entry</dt><dd class="mt-0.5 text-[17px] font-black italic">No</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block -translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">02</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Getting there</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">The Arena Line runs every 6 minutes from Central until 01:00. Riding in? Two thousand free, staffed bike racks wait at the north gate.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Metro</dt><dd class="mt-0.5 text-[17px] font-black italic">6 min</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Bikes</dt><dd class="mt-0.5 text-[17px] font-black italic">2,000</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Parking</dt><dd class="mt-0.5 text-[17px] font-black italic">P3</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">03</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Food &amp; merch</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Twelve local vendors line the main concourse. Team jerseys and the limited final-day hoodie sell out fast &mdash; the merch truck opens at 16:00.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Vendors</dt><dd class="mt-0.5 text-[17px] font-black italic">12</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Merch</dt><dd class="mt-0.5 text-[17px] font-black italic">16:00</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Cashless</dt><dd class="mt-0.5 text-[17px] font-black italic">Yes</dd></div>
          </dl>
        </div>
      </details>

      <details name="tac15-guide" class="group details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:duration-500 details-content:ease-[cubic-bezier(0.2,0.7,0.2,1)] details-content:[transition-behavior:allow-discrete] open:details-content:h-auto motion-reduce:details-content:transition-none">
        <summary class="block cursor-pointer list-none outline-none [&::-webkit-details-marker]:hidden [&:focus-visible>span]:outline-2 [&:focus-visible>span]:outline-offset-4 [&:focus-visible>span]:outline-white">
          <span class="block -translate-x-3 -skew-x-12 border-l-4 border-tac15-red bg-tac15-panel shadow-[6px_6px_0_oklch(0_0_0/0.5)] ring-1 ring-white/8 transition-[transform,translate,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] hover:bg-tac15-panel2 group-open:translate-x-0 group-open:skew-x-0 group-open:bg-linear-to-r group-open:from-tac15-red group-open:to-tac15-red2 group-open:shadow-[0_6px_0_var(--color-tac15-deep)] motion-reduce:transition-none">
            <span class="flex min-h-14 skew-x-12 items-center gap-4 px-5 py-2 transition-transform duration-500 ease-[cubic-bezier(0.3,1.3,0.4,1)] group-open:skew-x-0 motion-reduce:transition-none">
              <span class="font-tac15-mono text-[13px] font-bold text-tac15-hot transition-colors group-open:text-white/75">04</span>
              <span class="flex-1 text-[17px] font-extrabold tracking-[0.04em] uppercase italic">Accessibility</span>
              <svg aria-hidden="true" class="flex-none transition-transform duration-500 group-open:rotate-90 motion-reduce:transition-none" viewBox="0 0 20 20" width="20" height="20"><path d="M5 4l6 6-6 6M11 4l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="square"/></svg>
            </span>
          </span>
        </summary>
        <div class="mt-3 grid gap-4 border-l-4 border-tac15-red/40 bg-tac15-panel/70 px-5 py-4">
          <p class="text-[14.5px] leading-relaxed text-tac15-mut">Step-free routes from every gate, sensory kits at guest services and live audio-described commentary on channel 3 of the arena app.</p>
          <dl class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Step-free</dt><dd class="mt-0.5 text-[17px] font-black italic">All</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Quiet room</dt><dd class="mt-0.5 text-[17px] font-black italic">L2</dd></div>
            <div class="bg-white/5 px-2 py-2.5 ring-1 ring-white/8"><dt class="font-tac15-mono text-[10.5px] tracking-widest text-tac15-mut uppercase">Audio</dt><dd class="mt-0.5 text-[17px] font-black italic">Ch 3</dd></div>
          </dl>
        </div>
      </details>
    </div>

    <p aria-hidden="true" class="justify-self-center rounded-full px-3.5 py-2 text-center font-tac15-mono text-[11.5px] text-tac15-mut ring-1 ring-white/10">-skew-x-12 · skew-x-12 · group-open:skew-x-0</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tac15-bg: #100909;
  --color-tac15-bg: oklch(0.15 0.012 20);
  --color-tac15-glow: #a9000c59;
  --color-tac15-glow: oklch(0.45 0.2 25 / 0.35);
  --color-tac15-panel: #1e1616;
  --color-tac15-panel: oklch(0.21 0.014 20);
  --color-tac15-panel2: #291f1e;
  --color-tac15-panel2: oklch(0.25 0.016 20);
  --color-tac15-ink: #f8f4f4;
  --color-tac15-ink: oklch(0.97 0.005 20);
  --color-tac15-mut: #baadad;
  --color-tac15-mut: oklch(0.76 0.015 20);
  --color-tac15-red: #c5002b;
  --color-tac15-red: oklch(0.52 0.21 22);
  --color-tac15-red2: #d81327;
  --color-tac15-red2: oklch(0.56 0.22 25);
  --color-tac15-hot: #ff6a65;
  --color-tac15-hot: oklch(0.72 0.19 25);
  --color-tac15-deep: #800613;
  --color-tac15-deep: oklch(0.38 0.15 25);
  --font-tac15-sans: 'Archivo', system-ui, sans-serif;
  --font-tac15-mono: 'JetBrains 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-15 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Skew the box, unskew the words. Both transforms live on two nested spans and transition together, so the label never wobbles while the stripe squares up:

<summary class="group/s block …">
  <span class="block -skew-x-12 translate-x-3 transition duration-500
    group-open:skew-x-0 group-open:translate-x-0 group-open:bg-tac15-red">
    <span class="flex skew-x-12 transition duration-500 group-open:skew-x-0">…

Two properties, no conflict. Tailwind v4 writes skew-* into transform but translate-* into the individual translate property, so the zigzag offset and the slant compose without either utility overwriting the other — the reason the original needed hand-tuned translate: declarations is gone. The body panel underneath stays a plain rectangle (nobody should read skewed paragraphs) and slides open with details-content:h-0 open:details-content:h-auto under [interpolate-size:allow-keywords].

Make it yours

  • Slant: swap -skew-x-12/skew-x-12 for -skew-x-6/skew-x-6 — always change the pair together.
  • Straight stack: remove the translate-x-3 / -translate-x-3 offsets; the stripes still read as dynamic.
  • Team colours: edit --color-tac15-red and --color-tac15-deep — fill, edge bar, shadow and numerals follow.
  • Independent sections: drop the shared name="tac15-guide" so several stripes can stay open.

Gotchas — read before shipping

  • Never skip the counter-skew — slanted body text is hard to read and especially hostile to dyslexic readers.
  • A 12° skew overhangs its box by about height × tan(12°) (≈13px on a 60px stripe) on each side; keep horizontal padding on the wrapper or the corners clip at 390px.
  • Transition the label's skew with the same duration and easing as the stripe, or the text visibly leans during the morph.
  • Outlines on <summary> draw an upright rectangle around the parallelogram; moving the ring to the inner span keeps it on the shape.

Browser support

ChromeSafariFirefoxEdge
129+not yetnot yet129+

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

2D transforms are universal; the floor is Tailwind v4's sheet. <details name> exclusivity needs Chrome 120 / Safari 17.2 / Firefox 130, and the height tween needs ::details-content (Chrome 131) — elsewhere panels open instantly.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗

HTML & JSno Tailwind involved

<details name="">MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →