Home
Cristian
Native HTML Accordion

Native HTML Accordion

native html accordion summary details

This tailwind example is contributed by Cristian, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is collapsible

Other Accordion

Author Cristian

2.1k

Fork Fullscreen

<body class="bg-gray-100 dark:bg-gray-800 py-8 px-4 font-medium dark:text-white">
    <details class="bg-white dark:bg-gray-700 shadow-md rounded-md p-4 max-w-md mx-auto">
        <summary class="cursor-pointer border-b border-gray-300 dark:border-gray-600 pb-2 mb-4">Click to show more</summary>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum vel neque similique delectus repellendus aliquam aperiam cumque architecto nostrum, sapiente doloribus blanditiis temporibus? Omnis nihil cumque saepe expedita accusamus impedit esse voluptatibus possimus vel vitae, ab sint reiciendis tempore commodi excepturi soluta accusantium tenetur ut cupiditate natus ratione ipsa velit autem dolore. Commodi voluptates iure asperiores, ullam hic officiis totam natus laborum fugit maxime. Ut aspernatur placeat illum animi blanditiis maxime magnam nesciunt exercitationem eos recusandae? Vitae, praesentium? Magnam maxime voluptates consequuntur, laudantium earum, ipsa, laborum dolor libero consectetur doloremque totam in est fugiat optio velit qui at neque hic voluptatum nesciunt ullam sint. Accusamus atque dolorum molestiae omnis quam? Veritatis ea, assumenda, corporis vitae, illum fugiat sequi saepe asperiores ipsum odio sit molestias eius et at dignissimos neque reiciendis. Neque modi facilis voluptatibus cumque numquam molestiae quidem nemo. Incidunt sint at similique numquam asperiores architecto quae fuga animi voluptas perspiciatis veritatis voluptatem quo, ullam explicabo, ratione libero sapiente obcaecati cumque porro in aspernatur quibusdam dolores. Assumenda dolorem ipsam eos similique modi! Dignissimos deserunt repellat officia aut. Eum, eius qui atque laborum, autem nihil minima quos ipsa nisi, architecto tempore assumenda maiores aspernatur quis? Laborum quibusdam aliquam cumque libero distinctio!</p>
    </details>
</body>

Related Examples

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

4 weeks ago

66
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

10 months ago

3.4k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

876
Hero

Author:
ORGIN_DREAMS

4 months ago

596
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

3 months ago

536
Login page

Author:
Reuben Enahoro

9 months ago

1.6k
Simple Payment Successfull Notification Page

Author:
Anonymous

4 months ago

874
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.2k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20k
Organization Hierarchy list

Author:
Anonymous

2 years ago

7.9k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.4k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

6 months ago

745

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components