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>
);
}
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>
);
}
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/reactAccordion.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>
);
}
