Home
Lyra Ravensong
Accordion section

Accordion section

This tailwind example is contributed by Lyra Ravensong, on 26-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is collapsible

Accordion

Author Lyra Ravensong

15k

Fork Fullscreen

<div class="mx-auto max-w-lg mt-24">
    <div class="divide-y divide-gray-100">
        <details class="group" open>
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 01
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the first item's accordion body.</div>
        </details>
        <details class="group">
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 02
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the second item's accordion body.</div>
        </details>
        <details class="group">
            <summary
                class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-secondary-900 group-open:text-primary-500">
                Accordion item 03
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="block h-5 w-5 group-open:hidden">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="hidden h-5 w-5 group-open:block">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                    </svg>
                </div>
            </summary>
            <div class="pb-4 text-secondary-500">This is the third item's accordion body.</div>
        </details>
    </div>
</div>

Related Examples

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.3k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

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

Author:
Manuela Bianka

3 years ago

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

Author:
King Kali

2 years ago

15.7k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

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

Author:
Rajesh Maheshwari

8 months ago

987
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.3k
Accordion FAQ

Author:
Nikola Małecka

10 months ago

1.1k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.9k
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

10 months ago

1.2k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

1 year ago

2.6k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components