25 Tailwind CSS FAQ Accordion
20 / 25

All 25 in 25 Tailwind CSS FAQ Accordion

  1. 01Tailwind Peer-Checked FAQ Accordion with No JavaScript
  2. 02Tailwind Native Details/Summary FAQ with Custom Styled Icons
  3. 03Tailwind Exclusive Accordion — Only One FAQ Open at a Time
  4. 04Tailwind Multi-Open FAQ Accordion with a Live CSS Counter
  5. 05Tailwind CSS FAQ Accordion Template (Free, Copy-Paste)
  6. 06Tailwind Dark Mode FAQ Accordion with light-dark() and No .dark Class
  7. 07Tailwind Glassmorphism FAQ Accordion with Frosted Backdrop Blur
  8. 08Tailwind Minimalist E-Commerce FAQ Accordion for Product Pages
  9. 09Tailwind Neumorphic Soft-UI FAQ Accordion Cards
  10. 10Tailwind Animate Height Auto FAQ with grid-rows 0fr to 1fr
  11. 11Tailwind FAQ Chevron Rotate 180 Degrees on Toggle
  12. 12Tailwind Animated Plus to Minus Icon Morph FAQ Accordion
  13. 13Tailwind Spring Bounce FAQ Accordion with linear() Easing
  14. 14Tailwind Two-Column FAQ Accordion Grid with Independent Columns
  15. 15Tailwind Horizontal FAQ Accordion with Sideways Expanding Panels
  16. 16Tailwind Categorised FAQ Help Centre with a Sticky Sidebar Menu
  17. 17Tailwind Card-Style FAQ Panels with a Layered Shadow Elevation System
  18. 18Tailwind FAQ Accordion with a Live Search Bar Filter
  19. 19Tailwind Expand All and Collapse All FAQ Accordion Buttons
  20. 20Tailwind FAQ with a Still Have Questions Contact CTA Card
  21. 21Tailwind Accessible ARIA FAQ Accordion with Keyboard Navigation
  22. 22Tailwind FAQ with FAQPage JSON-LD Schema for Rich Snippets and AI Search
  23. 23Bootstrap 5 Accordion Rebuilt in Tailwind (and the JavaScript You Delete)
  24. 24Tailwind FAQ Component in React, Vue, Svelte and Astro (One Port Recipe)
  25. 25Tailwind FAQ with Voice Search Using the Speech Recognition API
Pure TailwindMIT licensed

Tailwind FAQ with a Still Have Questions Contact CTA Card

The conversion completion of every FAQ: a “Still have questions?” card that catches the users your answers did not — the difference between a dead-end page and a support funnel. A warm gradient panel with an overlapping avatar group (the real-humans-reply trust signal), a response-time promise, and exactly two actions in clear hierarchy.

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="tfa-20 w-full min-h-svh grid place-items-center bg-tfa20-bg font-tfa20-sans text-tfa20-ink px-5 py-12">
  <div class="w-[min(660px,100%)]">
    <header>
      <h1 class="text-[clamp(26px,4.6vw,38px)] font-extrabold tracking-[-0.025em]">Frequently asked questions</h1>
      <p class="mt-3 max-w-[50ch] text-[14.5px] leading-relaxed text-tfa20-mut">And for everything we did not think of — real humans, four-hour replies.</p>
    </header>

    <div data-panel class="mt-6 flex flex-col gap-2.5">
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]" open>
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Can I try before buying?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Every plan starts with a 14-day full-featured trial, no card required. Trial workspaces convert in place — nothing to migrate when you subscribe.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">How does seat billing work mid-month?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Added seats are prorated to the day; removed seats credit your next invoice. The billing page shows a live preview of the next charge before you confirm anything.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Do you have an uptime SLA?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">99.9% on Business, 99.99% on Enterprise, both with service credits. The status page keeps five years of incident history public — judge us on it.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Can I export my data?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Any time, in full: JSON, CSV and attachments via one-click export or the API. Your data is yours — leaving must be easy for staying to mean anything.</p>
      </details>
    </div>

    <aside class="mt-6 rounded-[20px] bg-[linear-gradient(140deg,var(--color-tfa20-ctabg),var(--color-tfa20-ctabg2))] px-6 py-8 text-center text-white shadow-[0_20px_48px_-24px_oklch(0.3_0.06_50/0.5)] sm:px-9">
      <div aria-hidden="true" class="flex justify-center">
        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
      </div>
      <h2 class="mt-4 text-[clamp(20px,3.2vw,26px)] font-extrabold tracking-[-0.02em]">Still have questions?</h2>
      <p class="mx-auto mt-2 max-w-[42ch] text-[13.5px] leading-[1.6] text-white/85">Our support team replies within 4 hours, every day including weekends.</p>
      <div class="mt-5 flex flex-wrap items-center justify-center gap-3.5">
        <a href="#tfa20-chat" class="inline-flex min-h-[46px] items-center rounded-xl bg-white px-6 text-[14px] font-extrabold text-tfa20-ctabg no-underline transition-[translate,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_24px_oklch(0.1_0.03_50/0.4)] focus-visible:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-white motion-reduce:transition-none motion-reduce:hover:translate-y-0">Chat with us</a>
        <a href="mailto:help@example.com" class="inline-flex min-h-11 items-center text-[13.5px] font-semibold text-white/90 underline underline-offset-4 transition-colors duration-200 hover:text-white focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-white">help@example.com</a>
      </div>
    </aside>

    <p class="mt-5 text-[12.5px] text-tfa20-mut">The CTA sits after the list on purpose — it catches users at the exact moment the answers ran out.</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfa20-bg: #fcfaf7;
  --color-tfa20-bg: oklch(0.98 0.008 75);
  --color-tfa20-ink: #33291f;
  --color-tfa20-ink: oklch(0.25 0.025 55);
  --color-tfa20-mut: #6b5c4e;
  --color-tfa20-mut: oklch(0.47 0.025 55);
  --color-tfa20-edge: #e7e0d6;
  --color-tfa20-edge: oklch(0.9 0.015 70);
  --color-tfa20-accedge: #d99b6a;
  --color-tfa20-accedge: oklch(0.74 0.09 55);
  --color-tfa20-acc: #a8541b;
  --color-tfa20-acc: oklch(0.52 0.15 50);
  --color-tfa20-ctabg: #2d2318;
  --color-tfa20-ctabg: oklch(0.25 0.04 55);
  --color-tfa20-ctabg2: #4a3220;
  --color-tfa20-ctabg2: oklch(0.34 0.07 52);
  --font-tfa20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-20 {
  width: 100%;
  min-height: 100svh;
}

.tfa-20 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-20 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .35s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .35s allow-discrete;
  }

  .tfa-20 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-20 details::details-content {
    transition-duration: 1ms;
  }
}

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-tfa20-bg: #fcfaf7;
  --color-tfa20-bg: oklch(0.98 0.008 75);
  --color-tfa20-ink: #33291f;
  --color-tfa20-ink: oklch(0.25 0.025 55);
  --color-tfa20-mut: #6b5c4e;
  --color-tfa20-mut: oklch(0.47 0.025 55);
  --color-tfa20-edge: #e7e0d6;
  --color-tfa20-edge: oklch(0.9 0.015 70);
  --color-tfa20-accedge: #d99b6a;
  --color-tfa20-accedge: oklch(0.74 0.09 55);
  --color-tfa20-acc: #a8541b;
  --color-tfa20-acc: oklch(0.52 0.15 50);
  --color-tfa20-ctabg: #2d2318;
  --color-tfa20-ctabg: oklch(0.25 0.04 55);
  --color-tfa20-ctabg2: #4a3220;
  --color-tfa20-ctabg2: oklch(0.34 0.07 52);
  --font-tfa20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-20 {
  width: 100%;
  min-height: 100svh;
}

.tfa-20 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-20 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .35s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .35s allow-discrete;
  }

  .tfa-20 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-20 details::details-content {
    transition-duration: 1ms;
  }
}
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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">

What changed in the port

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

  • -ml-3 first:ml-0 is the tidiest single line in this port: a rule plus a :first-child override, collapsed into one class list on the element that overlaps.
  • The gradient composes two @theme tokens rather than a color-mix() of one. Mixing inside an arbitrary gradient works, but naming the second stop makes the card retintable without re-deriving the maths.
  • The second CTA stop exists only because the original mixed the accent into the CTA background at 70% — a good example of where deriving in @theme beats deriving inline: the token is now inspectable in devtools.
  • UI upgrade from the CSS original: body copy on the card moved from a muted warm token to text-white/85, and the accent from oklch(0.6 0.16 50) to 0.52 0.15 — the original's hover ink measured about 3.2:1 on white.
  • UI upgrade: the primary button now also lifts on focus-visible:, not just hover, and carries motion-reduce: fallbacks — keyboard users got no acknowledgement at all in the original.
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 FAQ with a Still Have Questions Contact CTA Card
Source: https://codefronts.com/snippets/tailwind-css-faq-accordion/tailwind-faq-still-have-questions-contact-cta/

The conversion completion of every FAQ: a “Still have questions?” card that catches the users your answers did not — the difference between a dead-end page and a support funnel. A warm gradient panel with an overlapping avatar group (the real-humans-reply trust signal), a response-time promise, and exactly two actions in clear hierarchy.
## HTML
```html
<section class="tfa-20 w-full min-h-svh grid place-items-center bg-tfa20-bg font-tfa20-sans text-tfa20-ink px-5 py-12">
  <div class="w-[min(660px,100%)]">
    <header>
      <h1 class="text-[clamp(26px,4.6vw,38px)] font-extrabold tracking-[-0.025em]">Frequently asked questions</h1>
      <p class="mt-3 max-w-[50ch] text-[14.5px] leading-relaxed text-tfa20-mut">And for everything we did not think of — real humans, four-hour replies.</p>
    </header>

    <div data-panel class="mt-6 flex flex-col gap-2.5">
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]" open>
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Can I try before buying?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Every plan starts with a 14-day full-featured trial, no card required. Trial workspaces convert in place — nothing to migrate when you subscribe.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">How does seat billing work mid-month?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Added seats are prorated to the day; removed seats credit your next invoice. The billing page shows a live preview of the next charge before you confirm anything.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Do you have an uptime SLA?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">99.9% on Business, 99.99% on Enterprise, both with service credits. The status page keeps five years of incident history public — judge us on it.</p>
      </details>
      <details class="group rounded-[13px] border border-tfa20-edge bg-white transition-[border-color,box-shadow] duration-300 open:border-tfa20-accedge open:shadow-[0_12px_28px_-20px_oklch(0.6_0.16_50/0.45)]">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-4 py-3.5 text-[15px] font-semibold transition-colors duration-200 hover:text-tfa20-acc focus-visible:rounded-[13px] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-tfa20-acc [&::-webkit-details-marker]:hidden">Can I export my data?
          <i aria-hidden="true" class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-b-2 border-r-2 border-tfa20-acc transition-[rotate,translate] duration-350 group-open:translate-y-0.5 group-open:rotate-[225deg] motion-reduce:transition-none"></i>
        </summary>
        <p class="max-w-[60ch] px-4 pb-3.5 text-[13.5px] leading-[1.7] text-tfa20-mut">Any time, in full: JSON, CSV and attachments via one-click export or the API. Your data is yours — leaving must be easy for staying to mean anything.</p>
      </details>
    </div>

    <aside class="mt-6 rounded-[20px] bg-[linear-gradient(140deg,var(--color-tfa20-ctabg),var(--color-tfa20-ctabg2))] px-6 py-8 text-center text-white shadow-[0_20px_48px_-24px_oklch(0.3_0.06_50/0.5)] sm:px-9">
      <div aria-hidden="true" class="flex justify-center">
        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop" width="44" height="44" alt="" class="size-11 rounded-full border-[3px] border-tfa20-ctabg object-cover -ml-3 first:ml-0">
      </div>
      <h2 class="mt-4 text-[clamp(20px,3.2vw,26px)] font-extrabold tracking-[-0.02em]">Still have questions?</h2>
      <p class="mx-auto mt-2 max-w-[42ch] text-[13.5px] leading-[1.6] text-white/85">Our support team replies within 4 hours, every day including weekends.</p>
      <div class="mt-5 flex flex-wrap items-center justify-center gap-3.5">
        <a href="#tfa20-chat" class="inline-flex min-h-[46px] items-center rounded-xl bg-white px-6 text-[14px] font-extrabold text-tfa20-ctabg no-underline transition-[translate,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_24px_oklch(0.1_0.03_50/0.4)] focus-visible:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-white motion-reduce:transition-none motion-reduce:hover:translate-y-0">Chat with us</a>
        <a href="mailto:help@example.com" class="inline-flex min-h-11 items-center text-[13.5px] font-semibold text-white/90 underline underline-offset-4 transition-colors duration-200 hover:text-white focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-white">help@example.com</a>
      </div>
    </aside>

    <p class="mt-5 text-[12.5px] text-tfa20-mut">The CTA sits after the list on purpose — it catches users at the exact moment the answers ran out.</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfa20-bg: #fcfaf7;
  --color-tfa20-bg: oklch(0.98 0.008 75);
  --color-tfa20-ink: #33291f;
  --color-tfa20-ink: oklch(0.25 0.025 55);
  --color-tfa20-mut: #6b5c4e;
  --color-tfa20-mut: oklch(0.47 0.025 55);
  --color-tfa20-edge: #e7e0d6;
  --color-tfa20-edge: oklch(0.9 0.015 70);
  --color-tfa20-accedge: #d99b6a;
  --color-tfa20-accedge: oklch(0.74 0.09 55);
  --color-tfa20-acc: #a8541b;
  --color-tfa20-acc: oklch(0.52 0.15 50);
  --color-tfa20-ctabg: #2d2318;
  --color-tfa20-ctabg: oklch(0.25 0.04 55);
  --color-tfa20-ctabg2: #4a3220;
  --color-tfa20-ctabg2: oklch(0.34 0.07 52);
  --font-tfa20-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tfa-20 {
  width: 100%;
  min-height: 100svh;
}

.tfa-20 [data-panel] {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .tfa-20 details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .35s cubic-bezier(.4,0,.2,1), opacity .3s, content-visibility .35s allow-discrete;
  }

  .tfa-20 details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfa-20 details::details-content {
    transition-duration: 1ms;
  }
}
```

How this works

Placement first, pixels second. The CTA belongs after the FAQ, full-width, visually distinct from the Q&A rhythm above it: users scroll the list, fail to find their answer, and the very next thing they see must be the escape hatch. Contact details above the questions train users to skip them; floating chat bubbles get banner-blindness.

The avatar stack is a trust signal, and it is two utilities. -ml-3 pulls each portrait over its neighbour and first:ml-0 exempts the first — in CSS this was a rule plus a :first-child override, and the first: variant is one of those cases where the utility spelling is simply shorter. Each ring is the card's own background colour, so the overlap reads as a cutout whatever sits behind.

Exactly two actions, in hierarchy. A filled primary (the fast path) and a quiet secondary (the async path). One action strands users whose channel it is not; three or more becomes a decision. And the response-time promise does more work than any design element on the card — commit to a number you can keep.

Make it yours

  • Channels: swap the primary for a booking link on sales-led products, or a community link for dev tools. The hierarchy stays.
  • Avatars: replace the three portraits with your actual support team — real faces outperform stock faces in every published test.
  • Tone: delete the gradient for a flat panel; sober B2B rarely wants the warmth.
  • Live status: a green dot and “Online now” beside the promise, driven by your support tool's widget API.

Gotchas — read before shipping

  • Keep the CTA OUTSIDE the accordion list container if you use the :has() dimming trick from demo 03 — otherwise it dims with the closed items.
  • Avatar images need width and height attributes, not just utilities, to avoid layout shift on slow loads.
  • A mailto: as the ONLY contact option strands webmail users on desktop. Pair it with chat, a form, or a copyable address.
  • Keep the promise honest: four hours displayed and three days actual is worse than no CTA. This block is a commitment, not a decoration.

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

Flex, gradients and negative margins are universal; the floor is the oklch() token math and Tailwind v4's sheet. The animated panel enhances progressively.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →