21 Tailwind CSS Pricing Sections
19 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Feature Accordion Pricing Tiers

Three tiers whose full feature lists live inside native <details> elements — short page, deep detail on demand, keyboard-accessible for free. The port's neat bit is v4's open: variant: the chevron rotation and the extra open-state padding are stated on the elements, so the disclosure's whole visual behaviour is one class list.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tps-19 w-full min-h-svh bg-tps19-bg bg-[radial-gradient(60%_60%_at_50%_0%,--alpha(--color-tps19-violet/16),transparent_60%)] font-tps19-sans text-tps19-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(24px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] text-white">Pricing without the wall of checkmarks.</h2>
    <p class="m-0 text-sm text-tps19-muted">Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-start gap-4 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps19-card border border-tps19-violet/20">
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Indie</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>11<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For solo developers shipping side projects.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1">
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">1 project workspace</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">10 GB storage</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Community forum support</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Public deploys with auto-SSL</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">50K monthly visitor cap</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">1-year version history</li>
        </ul>
      </details>
      <a href="#indie" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-tps19-violet/12 text-tps19-lilac border border-tps19-violet/30 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps19-violet/28 hover:text-white focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Indie &rarr;</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-linear-180 from-tps19-card-hi to-tps19-card border border-tps19-violet shadow-[inset_0_0_0_1px_--theme(--color-tps19-violet),0_16px_40px_--alpha(--color-tps19-violet/22)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-2.75 py-1 rounded-full bg-linear-135 from-tps19-violet to-tps19-fuchsia text-tps19-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Studio</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>34<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For small teams shipping to real users.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1" open>
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Unlimited project workspaces</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">100 GB storage</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Priority email + chat support</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Custom domains with auto-SSL</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">500K monthly visitor cap</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">3-year version history</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Team roles &amp; permissions</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a href="#studio" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-linear-135 from-tps19-violet to-tps19-fuchsia text-tps19-bg border border-transparent text-[13.5px] font-semibold no-underline transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Studio &rarr;</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps19-card border border-tps19-violet/20">
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Org</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>96<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For organisations with compliance requirements.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1">
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Everything in Studio</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SAML SSO &amp; SCIM provisioning</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Audit logs (90-day retention)</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Unlimited monthly visitors</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Forever version history</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SOC 2 + DPA on file</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SLA 99.99% with credits</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a href="#org" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-tps19-violet/12 text-tps19-lilac border border-tps19-violet/30 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps19-violet/28 hover:text-white focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Talk to sales &rarr;</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps19-bg: #15071f;
  --color-tps19-bg: oklch(0.17 0.06 305);
  --color-tps19-card: #281033;
  --color-tps19-card: oklch(0.24 0.08 305);
  --color-tps19-card-hi: #3b1554;
  --color-tps19-card-hi: oklch(0.29 0.12 305);
  --color-tps19-body: #f3e8ff;
  --color-tps19-body: oklch(0.95 0.03 305);
  --color-tps19-list: #d8c8e8;
  --color-tps19-list: oklch(0.85 0.04 305);
  --color-tps19-muted: #c4a8d6;
  --color-tps19-muted: oklch(0.77 0.06 305);
  --color-tps19-lilac: #d8b4fe;
  --color-tps19-lilac: oklch(0.83 0.11 300);
  --color-tps19-violet: #a855f7;
  --color-tps19-violet: oklch(0.63 0.24 304);
  --color-tps19-fuchsia: #d946ef;
  --color-tps19-fuchsia: oklch(0.67 0.27 322);
  --font-tps19-sans: 'Figtree', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-19 {
  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-tps19-bg: #15071f;
  --color-tps19-bg: oklch(0.17 0.06 305);
  --color-tps19-card: #281033;
  --color-tps19-card: oklch(0.24 0.08 305);
  --color-tps19-card-hi: #3b1554;
  --color-tps19-card-hi: oklch(0.29 0.12 305);
  --color-tps19-body: #f3e8ff;
  --color-tps19-body: oklch(0.95 0.03 305);
  --color-tps19-list: #d8c8e8;
  --color-tps19-list: oklch(0.85 0.04 305);
  --color-tps19-muted: #c4a8d6;
  --color-tps19-muted: oklch(0.77 0.06 305);
  --color-tps19-lilac: #d8b4fe;
  --color-tps19-lilac: oklch(0.83 0.11 300);
  --color-tps19-violet: #a855f7;
  --color-tps19-violet: oklch(0.63 0.24 304);
  --color-tps19-fuchsia: #d946ef;
  --color-tps19-fuchsia: oklch(0.67 0.27 322);
  --font-tps19-sans: 'Figtree', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-19 {
  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=Figtree:wght@400;500;600;700;800&display=swap">

What changed in the port

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

  • .ps-19__det[open] { padding-bottom: 4px } and .ps-19__det[open] summary span { transform: rotate(180deg) } become open:pb-1 and group-open:rotate-180 — one on the element that changes, one on the chevron, neither reaching across the DOM.
  • Removing the default marker takes both list-none and [&::-webkit-details-marker]:hidden; the arbitrary variant is the only way to reach a shadow pseudo-element, and both are needed for full engine coverage.
  • The 820px media query's min-height: 0 on the subtitle inverts cleanly to min-h-0 md:min-h-9: the spacer only exists when three cards have to align.
  • items-start on the grid replaces the CSS's implicit reliance on align-items: start — and is the reason opening one accordion does not shift the other two.
  • Only the chevron transitions. The port keeps the native instant toggle for the panel rather than faking a height animation, which is the honest behaviour of <details>.
  • mt-auto on each CTA keeps the buttons at the card bottom regardless of how many features the open panel shows — the same flex trick, now visible on the element.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Feature Accordion Pricing Tiers
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-feature-accordion-pricing-tiers/

Three tiers whose full feature lists live inside native <details> elements &mdash; short page, deep detail on demand, keyboard-accessible for free. The port's neat bit is v4's open: variant: the chevron rotation and the extra open-state padding are stated on the elements, so the disclosure's whole visual behaviour is one class list.
## HTML
```html
<section class="tps-19 w-full min-h-svh bg-tps19-bg bg-[radial-gradient(60%_60%_at_50%_0%,--alpha(--color-tps19-violet/16),transparent_60%)] font-tps19-sans text-tps19-body px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="text-center mb-[clamp(24px,4vw,36px)]">
    <h2 class="m-0 mb-2 text-[clamp(22px,3.4vw,32px)] font-bold tracking-[-0.02em] text-white">Pricing without the wall of checkmarks.</h2>
    <p class="m-0 text-sm text-tps19-muted">Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] items-start gap-4 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps19-card border border-tps19-violet/20">
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Indie</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>11<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For solo developers shipping side projects.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1">
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">1 project workspace</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">10 GB storage</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Community forum support</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Public deploys with auto-SSL</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">50K monthly visitor cap</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">1-year version history</li>
        </ul>
      </details>
      <a href="#indie" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-tps19-violet/12 text-tps19-lilac border border-tps19-violet/30 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps19-violet/28 hover:text-white focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Indie &rarr;</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-linear-180 from-tps19-card-hi to-tps19-card border border-tps19-violet shadow-[inset_0_0_0_1px_--theme(--color-tps19-violet),0_16px_40px_--alpha(--color-tps19-violet/22)]">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap px-2.75 py-1 rounded-full bg-linear-135 from-tps19-violet to-tps19-fuchsia text-tps19-bg text-[10.5px] font-bold uppercase tracking-[0.08em]">Recommended</span>
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Studio</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>34<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For small teams shipping to real users.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1" open>
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Unlimited project workspaces</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">100 GB storage</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Priority email + chat support</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Custom domains with auto-SSL</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">500K monthly visitor cap</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">3-year version history</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Team roles &amp; permissions</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a href="#studio" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-linear-135 from-tps19-violet to-tps19-fuchsia text-tps19-bg border border-transparent text-[13.5px] font-semibold no-underline transition-[filter] duration-[180ms] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Choose Studio &rarr;</a>
    </article>
    <article class="relative flex flex-col px-[22px] pt-6 pb-5 rounded-[14px] bg-tps19-card border border-tps19-violet/20">
      <h3 class="m-0 mb-1.5 text-[15px] font-bold uppercase tracking-[0.08em] text-tps19-lilac">Org</h3>
      <div class="flex items-baseline gap-1 mb-1.5 text-[36px] font-extrabold tracking-[-0.03em] text-white"><em class="not-italic text-[0.5em] pr-0.5 opacity-70">$</em>96<span class="ml-1.5 text-[0.32em] font-medium opacity-65">/mo</span></div>
      <p class="m-0 mb-4 min-h-0 md:min-h-9 text-[13px]/[1.5] text-tps19-muted">For organisations with compliance requirements.</p>
      <details class="group mb-4 px-3.5 rounded-[8px] bg-tps19-violet/5 border border-tps19-violet/18 open:pb-1">
        <summary class="flex items-center justify-between py-2.75 list-none [&amp;::-webkit-details-marker]:hidden cursor-pointer outline-0 text-[13px] font-semibold text-tps19-lilac focus-visible:outline-2 focus-visible:outline-tps19-violet focus-visible:outline-offset-[3px] focus-visible:rounded-[4px]">See all features <span class="inline-block text-sm transition-transform duration-[250ms] group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#8964;</span></summary>
        <ul class="list-none p-0 pt-2.5 m-0 mb-2 border-t border-dashed border-tps19-violet/18 text-[12.5px]/[1.95] text-tps19-list">
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Everything in Studio</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SAML SSO &amp; SCIM provisioning</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Audit logs (90-day retention)</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Unlimited monthly visitors</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Forever version history</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SOC 2 + DPA on file</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">SLA 99.99% with credits</li>
          <li class="before:content-['\2713'] before:inline-block before:w-[18px] before:font-bold before:text-tps19-fuchsia">Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a href="#org" class="block mt-auto text-center px-4 py-2.75 rounded-[8px] bg-tps19-violet/12 text-tps19-lilac border border-tps19-violet/30 text-[13.5px] font-semibold no-underline transition-[background-color,color] duration-[180ms] hover:bg-tps19-violet/28 hover:text-white focus-visible:outline-2 focus-visible:outline-tps19-fuchsia focus-visible:outline-offset-[3px] motion-reduce:transition-none">Talk to sales &rarr;</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps19-bg: #15071f;
  --color-tps19-bg: oklch(0.17 0.06 305);
  --color-tps19-card: #281033;
  --color-tps19-card: oklch(0.24 0.08 305);
  --color-tps19-card-hi: #3b1554;
  --color-tps19-card-hi: oklch(0.29 0.12 305);
  --color-tps19-body: #f3e8ff;
  --color-tps19-body: oklch(0.95 0.03 305);
  --color-tps19-list: #d8c8e8;
  --color-tps19-list: oklch(0.85 0.04 305);
  --color-tps19-muted: #c4a8d6;
  --color-tps19-muted: oklch(0.77 0.06 305);
  --color-tps19-lilac: #d8b4fe;
  --color-tps19-lilac: oklch(0.83 0.11 300);
  --color-tps19-violet: #a855f7;
  --color-tps19-violet: oklch(0.63 0.24 304);
  --color-tps19-fuchsia: #d946ef;
  --color-tps19-fuchsia: oklch(0.67 0.27 322);
  --font-tps19-sans: 'Figtree', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is sized correctly in the moment before the
   browser build has compiled its utilities. */

.tps-19 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

open: is a first-class variant, so the disclosure needs no script. The element's own state drives both visual changes:

<details class="group open:pb-1 …">
  <summary>See all features <span class="group-open:rotate-180">⌄</span></summary>

The chevron reads the ancestor's state via group-open:; the padding reads its own via open:. In CSS these are two rules, one of which (.ps-19__det[open] summary span) has to reach two levels down.

Native disclosure means free accessibility. <summary> is focusable, operable with Enter and Space, announced as a button with an expanded state, and searchable by the browser's find-in-page. A hand-rolled accordion has to re-implement all four, and usually re-implements three.

Removing the marker takes two declarations, not one. list-style: none handles Firefox and modern Chromium; ::-webkit-details-marker handles older WebKit. Both are needed, and the arbitrary variant is the only way to reach the pseudo-element.

One tier ships open. The recommended card has the open attribute, which is a content decision rather than a styling one: the tier you want read is the tier you do not make people click.

Make it yours

  • Which tier starts open: the open attribute. Opening all three defeats the purpose; opening none hides your best feature list.
  • Chevron: the &#8964; glyph and group-open:rotate-180. Swap in an SVG if you need a crisper mark — the rotation utility is unchanged.
  • Accent pair: --color-tps19-violet and --color-tps19-fuchsia drive the pill, the bullets, the featured card and every focus ring.
  • Subtitle height: min-h-9. Raise it if your descriptions run to three lines, or the prices stop aligning across the three cards.
  • Transition: only the chevron animates, at duration-[250ms]. The panel itself uses the native instant toggle, which is the honest behaviour for <details>.

Gotchas — read before shipping

  • Both marker removals are required. Keep only list-none and older Safari still shows its triangle; keep only the ::-webkit-details-marker rule and Firefox does.
  • items-start on the grid is not cosmetic: with items-center, opening one card re-centres all three and the page jumps.
  • Do not try to animate the panel's height. <details> has no animatable open state without content-visibility tricks or JS, and a half-built animation is worse than the instant toggle.
  • Keep <summary> as the first child of <details>. Anywhere else and the browser synthesises its own label, leaving you with two.
  • group-open: needs the group class on the <details> itself — not on the card, or every chevron in the card follows the wrong element.
  • The featured card's list text is text-tps19-list at full opacity. On the purple gradient, dropping it to 70% falls under 4.5:1.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

<details>/<summary> is Baseline since 2020 and the open: variant compiles to a plain attribute selector, so support is universal. Only the ::-webkit-details-marker shim is engine-specific, and it is additive.

Techniques used in this demo

Utilitiesfirst-class utility or variant

radial-gradient()tw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →