Tailwind CSS Simple Accordion (FAQ) Examples

In this tutorial we will see Accordion examples or you can know as FAQ . Tailwind CSS do not provide any components for Accordion So we need to create Accordion step by step . let see some example

For working Accordion (FAQ) you can check

👉 Create Accordion (FAQ) Alpine js with Tailwind CSS


Tool Use

Tailwind CSS 2.x

Heroicons Icons


Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI


Example 1

Simple Accordion

<!-- Accordion 1 start -->
        <div class="flex justify-center">
            <div>
                <div class="px-20 py-12 space-y-4 bg-gray-100 shadow-xl">
                    <h3 class="text-2xl font-bold">Simple Accordion</h3>
                    <div class="p-2 bg-white divide-x-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                    <div class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div class="p-2 bg-white">Assumenda, quia temporibus eveniet a libero incidunt suscipit</div>
                    <div class="p-2 bg-white">Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</div>
                </div>
            </div>
        </div>
        <!-- Accordion 1 end -->




Example 2

Accordion with Icon

 <!-- Accordion 2 start -->
        <div class="flex justify-center mt-16">
            <div>
                <div class="px-20 py-12 space-y-4 bg-gray-100 shadow-xl">
                    <h3 class="text-2xl font-bold">Accordion With Icon</h3>
                    <div class="flex justify-between p-2 bg-white divide-x-2">Lorem ipsum dolor sit amet, consectetur
                        adipisicing elit
                        <span class=""><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg></span>
                    </div>
                    <div class="p-2 border-l-4 border-black border-red-400 bg-green-50">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.lorem </p>
                    </div>
                    <div class="p-2 bg-white">Assumenda, quia temporibus eveniet a libero incidunt suscipit</div>
                    <div class="p-2 bg-white">Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</div>
                </div>
            </div>
        </div>
        <!-- Accordion 2 end -->



More Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs