25 Tailwind CSS FAQ Accordion
05 / 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 CSS FAQ Accordion Template (Free, Copy-Paste)

The house-style SaaS FAQ, and the demo where the port stops being a port: in the CSS collection this entry shipped a hand-compiled stylesheet imitating Tailwind, and here it is simply real Tailwind. Indigo on white, native <details class="group">, divide-y for the rules between rows, a full dark: track, and no plugin, no config extension, no JavaScript.

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-05 w-full min-h-svh grid place-items-center bg-slate-50 font-tfa05-sans px-5 py-12 dark:bg-slate-950">
  <div class="mx-auto w-full max-w-2xl">
    <p class="text-center font-tfa05-mono text-[12px] font-semibold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400">Support</p>
    <h1 class="mt-3 text-center text-[clamp(28px,5vw,38px)] font-extrabold tracking-[-0.025em] text-slate-900 dark:text-slate-50">Frequently asked questions</h1>
    <p class="mx-auto mt-3 max-w-[48ch] text-center text-[14.5px] leading-7 text-slate-600 dark:text-slate-400">Native <code class="rounded bg-indigo-50 px-1.5 py-0.5 font-tfa05-mono text-[0.85em] text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">&lt;details class="group"&gt;</code> + <code class="rounded bg-indigo-50 px-1.5 py-0.5 font-tfa05-mono text-[0.85em] text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">group-open:</code> — no plugin, no JavaScript.</p>

    <div data-panel class="mt-9 divide-y divide-slate-200 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_1px_2px_oklch(0.4_0.02_250/0.06),0_12px_28px_-20px_oklch(0.4_0.02_250/0.25)] dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
      <details class="group" open>
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">How does billing work?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Plans are billed per seat, monthly or annually. You can add or remove seats at any time and the next invoice prorates automatically — no support ticket needed.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">Can I invite external collaborators?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Guests can be invited to single projects free of charge. They see only what you share, and you can convert a guest to a full seat with one click when the collaboration grows.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">Is there an API?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">A REST API with typed SDKs for TypeScript and Python ships on every plan, rate-limited by tier. Webhooks cover every event you can see in the activity feed.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">How do I cancel?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Self-serve, from Settings → Billing, effective at period end — no call, no retention script. Your data stays exportable for 90 days after cancellation.</p>
      </details>
    </div>

    <p class="mt-6 text-center text-[12px] text-slate-500 dark:text-slate-500">Real utilities, not a compiled imitation — paste straight into any Tailwind 3/4 project.</p>
  </div>
</section>
@import "tailwindcss";

@theme {
  --font-tfa05-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tfa05-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tfa-05 {
  width: 100%;
  min-height: 100svh;
}
/* Optional enhancement, identical to demo 02 and worth pasting into your globals.css once:
   it animates every group accordion on the site and degrades to instant open where unsupported. */

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

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

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

@media (prefers-reduced-motion: reduce) {
  .tfa-05 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 {
  --font-tfa05-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tfa05-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tfa-05 {
  width: 100%;
  min-height: 100svh;
}
/* Optional enhancement, identical to demo 02 and worth pasting into your globals.css once:
   it animates every group accordion on the site and degrades to instant open where unsupported. */

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

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

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

@media (prefers-reduced-motion: reduce) {
  .tfa-05 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&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • This entry is the collection's punchline: the CSS version needed ~40 hand-written rules to imitate mx-auto, max-w-2xl, divide-y, size-5 and the rest so its markup could stay 1:1 with real utilities. In the Tailwind collection all of that scaffolding is deleted — the stylesheet is two font tokens and the optional panel block.
  • divide-y divide-slate-200 is the one utility with no comfortable CSS equivalent: the original wrote .divide-y>*+*{border-top-width:1px} by hand, which is exactly what Tailwind generates.
  • The original's .marker-hidden / .group-open-rotate / .focus-ring shims — invented because arbitrary variants don't exist without a compiler — are gone. Real [&::-webkit-details-marker]:hidden, group-open:rotate-180 and focus-visible:outline-2 replace them one for one.
  • UI upgrade from the CSS original: a full dark: track (eleven prefixes, zero duplicated rules), body copy from text-sm to 14.5px with leading-7, and a two-layer card shadow instead of shadow-sm — the card now sits on the page rather than floating ambiguously.
  • UI upgrade: the focus ring became -outline-offset-2 (inset) so it is never clipped by the card's overflow-hidden, which the original's outline-offset:-2px shim got right only by accident of specificity.
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 CSS FAQ Accordion Template (Free, Copy-Paste)
Source: https://codefronts.com/snippets/tailwind-css-faq-accordion/tailwind-css-faq-accordion-template-free/

The house-style SaaS FAQ, and the demo where the port stops being a port: in the CSS collection this entry shipped a hand-compiled stylesheet imitating Tailwind, and here it is simply real Tailwind. Indigo on white, native <details class="group">, divide-y for the rules between rows, a full dark: track, and no plugin, no config extension, no JavaScript.
## HTML
```html
<section class="tfa-05 w-full min-h-svh grid place-items-center bg-slate-50 font-tfa05-sans px-5 py-12 dark:bg-slate-950">
  <div class="mx-auto w-full max-w-2xl">
    <p class="text-center font-tfa05-mono text-[12px] font-semibold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400">Support</p>
    <h1 class="mt-3 text-center text-[clamp(28px,5vw,38px)] font-extrabold tracking-[-0.025em] text-slate-900 dark:text-slate-50">Frequently asked questions</h1>
    <p class="mx-auto mt-3 max-w-[48ch] text-center text-[14.5px] leading-7 text-slate-600 dark:text-slate-400">Native <code class="rounded bg-indigo-50 px-1.5 py-0.5 font-tfa05-mono text-[0.85em] text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">&lt;details class="group"&gt;</code> + <code class="rounded bg-indigo-50 px-1.5 py-0.5 font-tfa05-mono text-[0.85em] text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">group-open:</code> — no plugin, no JavaScript.</p>

    <div data-panel class="mt-9 divide-y divide-slate-200 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_1px_2px_oklch(0.4_0.02_250/0.06),0_12px_28px_-20px_oklch(0.4_0.02_250/0.25)] dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
      <details class="group" open>
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">How does billing work?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Plans are billed per seat, monthly or annually. You can add or remove seats at any time and the next invoice prorates automatically — no support ticket needed.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">Can I invite external collaborators?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Guests can be invited to single projects free of charge. They see only what you share, and you can convert a guest to a full seat with one click when the collaboration grows.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">Is there an API?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">A REST API with typed SDKs for TypeScript and Python ships on every plan, rate-limited by tier. Webhooks cover every event you can see in the activity feed.</p>
      </details>

      <details class="group">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-[15.5px] font-semibold text-slate-900 transition-colors duration-200 hover:text-indigo-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 dark:text-slate-100 dark:hover:text-indigo-300 [&::-webkit-details-marker]:hidden">How do I cancel?
          <svg class="size-5 shrink-0 text-indigo-600 transition-transform duration-300 group-open:rotate-180 motion-reduce:transition-none dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </summary>
        <p class="px-6 pb-5 text-[14px] leading-7 text-slate-600 dark:text-slate-400">Self-serve, from Settings → Billing, effective at period end — no call, no retention script. Your data stays exportable for 90 days after cancellation.</p>
      </details>
    </div>

    <p class="mt-6 text-center text-[12px] text-slate-500 dark:text-slate-500">Real utilities, not a compiled imitation — paste straight into any Tailwind 3/4 project.</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --font-tfa05-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tfa05-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tfa-05 {
  width: 100%;
  min-height: 100svh;
}
/* Optional enhancement, identical to demo 02 and worth pasting into your globals.css once:
   it animates every group accordion on the site and degrades to instant open where unsupported. */

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

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

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

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

How this works

This is the idiom, unadorned. <details class="group"> plus group-open: is the whole accordion; divide-y draws the rules; rounded-2xl overflow-hidden keeps the first and last rows inside the card radius.

<details class="group" open>
  <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between
                  gap-4 px-6 py-5 font-semibold
                  [&::-webkit-details-marker]:hidden">
    How does billing work?
    <svg class="size-5 shrink-0 text-indigo-600 transition-transform
                duration-300 group-open:rotate-180">…</svg>
  </summary>
  <p class="px-6 pb-5 text-sm leading-7 text-slate-600">…</p>
</details>

What the CSS original had to fake. That demo shipped ~40 hand-written rules reproducing mx-auto, max-w-2xl, divide-y and friends so the markup could stay 1:1 with real utilities in a no-build page. Here that scaffolding is deleted: the browser build compiles the same class names, and the stylesheet holds only tokens and the animated-panel block. It is the cleanest before/after in the collection.

Dark mode is the payoff. Eleven dark: prefixes and the component has a second complete theme — no duplicated rule set, no .dark cascade to maintain. (Demo 06 argues the CSS-native counter-case with light-dark().)

Make it yours

  • Brand colour: swap the indigo-* utilities (text, ring, tint). Everything else is neutral slate.
  • Exclusive mode: add name="faq" to each <details> — pure HTML, utilities unchanged.
  • Tighter rows: py-5 → py-4, and drop the answer to leading-6.
  • Tailwind 3 project? The class names are identical; only the import line differs.

Gotchas — read before shipping

  • group-open: needs group on the <details> ancestor — the number-one "my chevron won't rotate" bug.
  • Safari still needs [&::-webkit-details-marker]:hidden; list-none alone leaves a ghost triangle.
  • transition-transform without a duration-* uses the 150ms default, which reads as a glitch rather than an animation. Always pair them.
  • Keep padding on the summary and the answer, never on the <details> itself, or the animated-height block leaks a sliver of open panel when closed.

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

The markup is <details> plus transforms — effectively universal. The floor is Tailwind v4's generated sheet; the optional ::details-content block adds Chrome 131 / Safari 18.4 for animated height, with an instant-open fallback everywhere else.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →