In this section we will create FAQ (accordion) ui using only tailwind css 3. Tailwind CSS 3 come with <details> and <summary> tag, So you can create easily faq question & answer section.
How to install & setup Tailwind CSS v3
Example 1
Tailwind v3 simple faq ui using <details> and <summary> tag.
<div class="min-h-screen">
<div class="max-w-md mx-auto px-8 space-y-2 mt-20">
<details class="p-4 rounded-lg">
<summary class="font-semibold">How does it work ?</summary>
<div class="mt-3">
<p class="text-gray-600 text-sm leading-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to use tailwind css 3 in react</summary>
<div class="mt-3">
<p class="text-gray-600 text-sm leading-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to install Tailwind CSS 3 ?</summary>
<div class="mt-3">
<p class="text-gray-600 text-sm leading-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to send feedback ?</summary>
<div class="mt-3">
<p class="text-gray-600 text-sm leading-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
</div>
</div>
tailwind v3 faq ui
Example 2
Tailwind CSS 3 faq with open close shadow style.
faq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 3 FAQ Shadow Style</title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<div class="min-h-screen bg-gray-100">
<div class="max-w-md px-8 pt-20 mx-auto space-y-2">
<details class="p-4 rounded-lg open:bg-white open:shadow-xl">
<summary class="font-semibold">How does it work ?</summary>
<div class="mt-3">
<p class="text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione
provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to use tailwind css 3 in react</summary>
<div class="mt-3">
<p class="text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione
provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to install Tailwind CSS 3 ?</summary>
<div class="mt-3">
<p class="text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione
provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
<details class="p-4 rounded-lg">
<summary class="font-semibold">How to send feedback ?</summary>
<div class="mt-3">
<p class="text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur fugit libero sunt quasi error, sequi tempore quo impedit porro saepe nesciunt. Ratione
provident, assumenda modi delectus accusantium officiis vero eum!</p>
</div>
</details>
</div>
</div>
</body>
</html>
Tailwind CSS 3 Accordion UI Shadow Style
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS v3 Cards Examples
How to use dark mode toggle switch in Tailwind CSS 3
Tailwind CSS 3 Login Page UI Example
