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

1.7k

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

google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

5 months ago

897
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

3 months ago

177
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.9k
Image Gallery with Alpine.Js

Author:
Maxim

5 months ago

291
Testimonial that What Client Says

Author:
Abdul Baset Bappy

3 weeks ago

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

Author:
Manuela Bianka

3 years ago

11.5k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

5 months ago

882
background animation
background animation

Author:
Jayendra Madara

11 months ago

2.6k
cards
cards with background animation

Author:
Anonymous

1 year ago

2.3k
Heading Style

Author:
KULDEEP

1 month ago

212
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

5 months ago

911
About Us Component

Author:
KULDEEP

1 week ago

143

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components