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
Responsive Card Grid With Tailwind CSS
Tailwind CSS Responsive Image Gallery with Grid