Tailwind CSS 3 FAQ Accordion UI Example

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

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

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