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

14.9k

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

19k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

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

Author:
Manuela Bianka

3 years ago

11.7k
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.3k
Accordion with minimum javascript

Author:
Anonymous

1 year ago

8.9k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

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

8 months ago

752
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

1 year ago

2.5k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

Author:
inbarajan P

11 months ago

1.7k
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

2 months ago

329
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

3 months ago

572

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components