FAQ.

Super simple animated FAQ with tailwind group hoverable accordion open and close.

This tailwind example is contributed by inbarajan P, on 12-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author inbarajan P

365

Fork Fullscreen

<div class="relative isolate overflow-hidden bg-custom">
                <div class="py-24 px-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-12">
                    <div class="flex flex-col text-left basis-1/2">
                        <p class="inline-block font-semibold text-primary mb-4">F.A.Q</p>
                        <p class="sm:text-4xl text-3xl font-extrabold text-base-content">Frequently Asked Questions</p>
                    </div>
                    <ul class="basis-1/2">
                        <li class='group'>
                            <button class="relative  flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false">
                                <span class="flex-1 text-base-content">Lorem ipsum, dolor sit amet consectetur?</span>
                                <svg class="flex-shrink-0 w-4 h-4  ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                                    <rect y="7" width="16" height="2" rx="1" class="block group-hover:opacity-0 origin-center rotate-90 transition duration-200 ease-out false"></rect>
                                </svg>
                            </button>
                            <div class="transition-all duration-300 ease-in-out group-hover:max-h-60 max-h-0 overflow-hidden" style={{ transition: "max-height 0.3s ease-in-out 0s" }}>
                                <div class="pb-5 leading-relaxed">
                                    <div class="space-y-2 leading-relaxed"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda cum amet blanditiis quis vero saepe quo veritatis ab dicta ratione cumque, labore velit omnis sequi voluptatem harum distinctio reiciendis eveniet!</div>
                                </div>
                            </div>
                        </li>
                        <li class='group'>
                            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false">
                                <span class="flex-1 text-base-content">Lorem ipsum, dolor sit amet consectetur?an>
                                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                                    <rect y="7" width="16" height="2" rx="1" class="group-hover:opacity-0 transform origin-center rotate-90 transition-all duration-200 ease-out false"></rect>
                                </svg>
                            </button>
                            <div class="transition-all duration-300 ease-in-out group-hover:max-h-60 max-h-0 overflow-hidden" style={{ transition: "max-height 0.3s ease-in-out 0s" }}>
                                <div class="pb-5 leading-relaxed">
                                    <div class="space-y-2 leading-relaxed"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda cum amet blanditiis quis vero saepe quo veritatis ab dicta ratione cumque, labore velit omnis sequi voluptatem harum distinctio reiciendis eveniet!</div>
                                </div>
                            </div>
                        </li>
                        <li class='group'>
                            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false">
                                <span class="flex-1 text-base-content">Lorem ipsum, dolor sit amet consectetur?</span>
                                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                                    <rect y="7" width="16" height="2" rx="1" class="group-hover:opacity-0 transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                                </svg>
                            </button>
                            <div class="transition-all duration-300 ease-in-out group-hover:max-h-60 max-h-0 overflow-hidden" style={{ transition: "max-height 0.3s ease-in-out 0s" }}>
                                <div class="pb-5 leading-relaxed">
                                    <div class="space-y-2 leading-relaxed"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda cum amet blanditiis quis vero saepe quo veritatis ab dicta ratione cumque, labore velit omnis sequi voluptatem harum distinctio reiciendis eveniet!</div>
                                </div>
                            </div>
                        </li>
                        <li class='group'>
                            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false">
                                <span class="flex-1 text-base-content">Lorem ipsum, dolor sit amet consectetur?</span>
                                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                                    <rect y="7" width="16" height="2" rx="1" class="group-hover:opacity-0 transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                                </svg>
                            </button>
                            <div class="transition-all duration-300 ease-in-out group-hover:max-h-60 max-h-0 overflow-hidden" style={{ transition: "max-height 0.3s ease-in-out 0s" }}>
                                <div class="pb-5 leading-relaxed">
                                    <div class="space-y-2 leading-relaxed"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda cum amet blanditiis quis vero saepe quo veritatis ab dicta ratione cumque, labore velit omnis sequi voluptatem harum distinctio reiciendis eveniet!</div>
                                </div>
                            </div>
                        </li>
                        <li class='group'>
                            <button class="relative flex gap-2 items-center w-full py-5 text-base font-semibold text-left border-t md:text-lg border-base-content/10" aria-expanded="false">
                                <span class="flex-1 text-base-content">Lorem ipsum, dolor sit amet consectetur?</span>
                                <svg class="flex-shrink-0 w-4 h-4 ml-auto fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out false"></rect>
                                    <rect y="7" width="16" height="2" rx="1" class="group-hover:opacity-0 transform origin-center rotate-90 transition duration-200 ease-out false"></rect>
                                </svg>
                            </button>
                            <div class="transition-all duration-300 ease-in-out group-hover:max-h-60 max-h-0 overflow-hidden" style={{ transition: "max-height 0.3s ease-in-out 0s" }}>
                                <div class="pb-5 leading-relaxed">
                                    <div class="space-y-2 leading-relaxed"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda cum amet blanditiis quis vero saepe quo veritatis ab dicta ratione cumque, labore velit omnis sequi voluptatem harum distinctio reiciendis eveniet!</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#" class='text-orange-500 mt-3 inline-flex font-medium no-underline group px-2 py-2 items-center -tracking-tight'>
                                See more
                                <svg class='w-5 h-5 group-hover:translate-x-1 transition-transform duration-500 ease-in-out' viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M78.1233 27.7777H21.8758C20.1259 27.7777 18.751 26.5555 18.751 24.9999C18.751 23.4444 20.1259 22.2222 21.8758 22.2222H78.1233C79.8732 22.2222 81.2482 23.4444 81.2482 24.9999C81.2482 26.5555 79.8732 27.7777 78.1233 27.7777Z" fill="#FF8E26" />
                                    <path d="M62.4999 47.2222C62.09 47.2266 61.6837 47.1548 61.307 47.0112C60.9302 46.8677 60.5915 46.6557 60.3125 46.3888C59.0625 45.2777 59.0625 43.5555 60.3125 42.4444L79.9991 24.9444L60.3125 7.4444C59.0625 6.33329 59.0625 4.61107 60.3125 3.49996C61.5624 2.38885 63.4998 2.38885 64.7498 3.49996L86.6238 22.9444C87.8737 24.0555 87.8737 25.7777 86.6238 26.8888L64.7498 46.3333C64.1248 46.8888 63.3123 47.1666 62.5624 47.1666L62.4999 47.2222Z" fill="#FF8E26" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

Related Examples

FAQ section
An expanding frequently asked questions section made without using javascript.

Author:
Manuela Bianka

2 years ago

10k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

17.1k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

1 year ago

12.4k
Tailwind FAQ accordion

Author:
yousef

8 months ago

2.6k
Accordion with minimum javascript

Author:
Anonymous

1 year ago

7.4k
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

1 year ago

7.8k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

4 months ago

1.2k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

2 months ago

308
FAQ cards
FAQ section with cards

Author:
Moriba Traore

1 year ago

13k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

7 months ago

1.1k
FAQ page

Author:
R Thapa

1 year ago

13.2k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

2 months ago

349

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components