React Tailwind CSS Accordion (FAQ) Example

This React JS tutorial will guide you through building an accordion component for FAQs using Tailwind CSS. We’ll cover the accordion component itself, including the question and answer UI elements. Additionally, we’ll explore using Headless UI with Tailwind CSS and React to create a fully-managed, renderless accordion component with an arrow indicator.

Tool Use

React JS

Tailwind CSS

Headless UI

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

React tailwind css simple accordion.

Accordion.jsx
import React from "react";

export default function Accordion() {
    return (
        <div>
            <div className="w-full px-8 mx-auto mt-20 space-y-2 shadow lg:max-w-md">
                <details className="p-4 rounded-lg">
                    <summary className="font-semibold">How to create Accordion (FAQ) in react ?</summary>
                    <div className="mt-3">
                        <p className="text-sm leading-6 text-gray-600">
                            React with Tailwind CSS Faq Accordion 1
                        </p>
                    </div>
                </details>
                <details className="p-4 rounded-lg">
                    <summary className="font-semibold">
                        How to use tailwind css 3 in react
                    </summary>
                    <div className="mt-3">
                        <p className="text-sm leading-6 text-gray-600">
                        React with Tailwind CSS Faq Accordion 2
                        </p>
                    </div>
                </details>
                <details className="p-4 rounded-lg">
                    <summary className="font-semibold">
                        How to install Tailwind CSS 3 ?
                    </summary>
                    <div className="mt-3">
                        <p className="text-sm leading-6 text-gray-600">
                        React with Tailwind CSS Faq Accordion 3
                        </p>
                    </div>
                </details>
                <details className="p-4 rounded-lg">
                    <summary className="font-semibold">
                        How to send feedback ?
                    </summary>
                    <div className="mt-3">
                        <p className="text-sm leading-6 text-gray-600">
                        React with Tailwind CSS Faq Accordion 4
                        </p>
                    </div>
                </details>
            </div>
        </div>
    );
}
create accordion

Example 2

React with tailwind css FAQ Question and Answers example.

FaqComponent.jsx
import React from "react";

export default function FaqComponent() {
    return (
        <div className="flex items-center justify-center h-screen">
            <div className="bg-white">
                <div className="container flex flex-col justify-center px-4 py-8 mx-auto md:p-8">
                    <h2 className="text-2xl font-semibold">
                        Frequently Asked Questions
                    </h2>
                    <p className="mt-4 mb-8 text-gray-600">
                        React Interview Questions And Answers
                    </p>
                    <div className="space-y-4">
                        <details className="w-full rounded-lg ring-1 ring-purple-600">
                            <summary className="px-4 py-6">
                                What is React? 
                            </summary>
                            <p className="px-4 py-6 pt-0 ml-4 -mt-4 text-gray-600">
                                React is a front-end JavaScript library
                                developed by Facebook in 2011. 
                            </p>
                        </details>
                        <details className="w-full rounded-lg ring-1 ring-purple-600">
                            <summary className="px-4 py-6">
                            What is Props and how to use it give some example?
                            </summary>
                            <p className="px-4 py-6 pt-0 ml-4 -mt-4 text-gray-600">
                            Props is the shorthand for Properties in React.
                            </p>
                        </details>
                        <details className="w-full rounded-lg ring-1 ring-purple-600">
                            <summary className="px-4 py-6">
                            How to install tailwind css in react js ?
                            </summary>
                            <p className="px-4 py-6 pt-0 ml-4 -mt-4 text-gray-600">
                            What are synthetic events in React?
                            </p>
                        </details>
                    </div>
                </div>
            </div>
        </div>
    );
}
create faq question and answers

Example 3

You can create accordion using headless ui. Headless Ui is a A fully-managed, renderless accordion component jam-packed with accessibility and keyboard features, perfect for building completely custom accordion for your next application.

Install Headless UI

To get started, install Headless UI via npm:

npm install @headlessui/react
Accordion.jsx
import { Disclosure } from "@headlessui/react";

export default function Accordion() {
    return (
        <div className="w-full px-4 pt-16">
            <div className="w-full max-w-md p-2 mx-auto bg-white rounded-2xl">
                <Disclosure>
                    {({ open }) => (
                        <>
                            <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-purple-900 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
                                <span>What is your refund policy?</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth={1.5}
                                    stroke="currentColor"
                                    className={`${
                                        open ? "rotate-180 transform" : ""
                                    } h-5 w-5 text-purple-500`}
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                                    />
                                </svg>
                            </Disclosure.Button>
                            <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
                                If you're unhappy with your purchase for any
                                reason, email us within 90 days and we'll refund
                                you in full, no questions asked.
                            </Disclosure.Panel>
                        </>
                    )}
                </Disclosure>
                <Disclosure as="div" className="mt-2">
                    {({ open }) => (
                        <>
                            <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-purple-900 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
                                <span>Do you offer technical support?</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth={1.5}
                                    stroke="currentColor"
                                    className={`${
                                        open ? "rotate-180 transform" : ""
                                    } h-5 w-5 text-purple-500`}
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                                    />
                                </svg>
                            </Disclosure.Button>
                            <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
                                No.
                            </Disclosure.Panel>
                        </>
                    )}
                </Disclosure>
                <Disclosure as="div" className="mt-2">
                    {({ open }) => (
                        <>
                            <Disclosure.Button className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-purple-900 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
                                <span>Do you have ticket support?</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth={1.5}
                                    stroke="currentColor"
                                    className={`${
                                        open ? "rotate-180 transform" : ""
                                    } h-5 w-5 text-purple-500`}
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                                    />
                                </svg>
                            </Disclosure.Button>
                            <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
                                Yes
                            </Disclosure.Panel>
                        </>
                    )}
                </Disclosure>
            </div>
        </div>
    );
}