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

1.8k

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

3 years ago

11.7k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19k
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

15.5k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.8k
Accordion FAQ

Author:
Nikola Małecka

8 months ago

803
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

8 months ago

1.4k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

7 months ago

934
FAQ with Search

Author:
Dpk Mht

1 year ago

2k
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

9.5k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

10 months ago

1.5k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 month ago

69
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

14.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components