In this tutorial, we will create Accordion (FAQ) in react js using tailwind css. We will see accordion component, faq question and question and answer ui with react. A fully-managed, renderless react accordion with arrow component with headless ui Tailwind CSS & React.
Tool Use
React JS
Tailwind CSS 3.v
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.
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>
);
}
Example 2
React with tailwind css FAQ Question and Answers example.
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>
);
}
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>
);
}
Read Also
React Tailwind CSS Tabs Examples
How to use Tailwind CSS 3 with Headless UI In React
Toggle Switch in React JS with Tailwind CSS Example
Create Reusable Button Component with React & Tailwind CSS
React Tailwind CSS Search Bar Example
React Tailwind CSS Sidebar Example
React JS Login Form with Tailwind CSS Example
React Responsive Navbar Menu With Tailwind CSS Example
How to install Tailwind CSS in React
React Tailwind CSS Dialog (Modal) Example
React Tailwind Registration Form Example
