- No data uploaded
- Instant results
Tailwind CSS FAQ Accordion for React
A production-ready minimal faq accordion: a frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.
Live component editor
Live preview
import { useState } from 'react';
export default function FaqAccordion() {
const [q1, setQ1] = useState(true);
const [q2, setQ2] = useState(false);
const [q3, setQ3] = useState(false);
const [q4, setQ4] = useState(false);
return (
<section className="px-6 py-16">
<div className="max-w-2xl mx-auto">
<h2 className="text-3xl font-bold text-center text-slate-900">Frequently asked questions</h2>
<div className="mt-10 flex flex-col gap-3">
<div className="bg-white border border-slate-200 shadow-sm rounded-xl">
<button type="button" className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left font-semibold text-slate-900" aria-controls="faq-a1" onClick={() => setQ1((v) => !v)} aria-expanded={q1}>
<span>Can I cancel anytime?</span><span className="text-xl font-bold text-[#4f46e5]" aria-hidden="true">+</span>
</button>
<div id="faq-a1" hidden={!q1}>
<p className="px-5 pb-4 text-sm leading-relaxed text-slate-500">Yes. Cancel from your billing page and you keep access until the end of the period.</p>
</div>
</div>
<div className="bg-white border border-slate-200 shadow-sm rounded-xl">
<button type="button" className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left font-semibold text-slate-900" aria-controls="faq-a2" onClick={() => setQ2((v) => !v)} aria-expanded={q2}>
<span>Do you offer a free trial?</span><span className="text-xl font-bold text-[#4f46e5]" aria-hidden="true">+</span>
</button>
<div id="faq-a2" hidden={!q2}>
<p className="px-5 pb-4 text-sm leading-relaxed text-slate-500">Every paid plan starts with a 14-day free trial — no credit card required.</p>
</div>
</div>
<div className="bg-white border border-slate-200 shadow-sm rounded-xl">
<button type="button" className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left font-semibold text-slate-900" aria-controls="faq-a3" onClick={() => setQ3((v) => !v)} aria-expanded={q3}>
<span>Which payment methods do you accept?</span><span className="text-xl font-bold text-[#4f46e5]" aria-hidden="true">+</span>
</button>
<div id="faq-a3" hidden={!q3}>
<p className="px-5 pb-4 text-sm leading-relaxed text-slate-500">All major cards, UPI, netbanking and invoicing for annual plans.</p>
</div>
</div>
<div className="bg-white border border-slate-200 shadow-sm rounded-xl">
<button type="button" className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left font-semibold text-slate-900" aria-controls="faq-a4" onClick={() => setQ4((v) => !v)} aria-expanded={q4}>
<span>Is my data secure?</span><span className="text-xl font-bold text-[#4f46e5]" aria-hidden="true">+</span>
</button>
<div id="faq-a4" hidden={!q4}>
<p className="px-5 pb-4 text-sm leading-relaxed text-slate-500">Data is encrypted in transit and at rest, and we never sell personal information.</p>
</div>
</div>
</div>
</div>
</section>
);
}
More Tailwind components for React
All components →- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
- Currency Pricing Table A dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY
- Testimonial Slider A customer testimonial carousel that shows one quote at a time with labelled slide buttons — no autoplay, so users stay in control
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
Install Tailwind CSS for React
Create a React project with Vite, then add Tailwind CSS v3:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -pSet content: ['./index.html', './src/**/*.{js,jsx}'] in tailwind.config.js, and add to src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;The brand color is applied with arbitrary values such as bg-[#4f46e5], so no theme configuration is needed.
Use the faq accordion in React
// App.jsx
import FaqAccordion from './FaqAccordion';
export default function App() {
return <FaqAccordion />;
}Accessibility & customization
Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.
Every color, radius and dark-mode choice is baked into plain utility classes, so the copied code has no runtime dependency on this site.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Tailwind CSS v3.4+ |
| Library | React 18+ (function component) |
| Interactive state | q1, q2, q3, q4 |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Tailwind faq accordion in React?
Create a React project, install Tailwind CSS as shown in the installation section, then paste the generated code.
Can I change the color of the faq accordion?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the faq accordion support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the faq accordion accessible?
Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.