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

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

2 months ago

91
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

168
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Author:
Bonimater

5 months ago

458
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.4k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

3 months ago

284
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

6 months ago

885
joker
joker cyber punk

Author:
Baraka Salvator

4 months ago

874
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

706
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

354
Share button

Author:
Maxim

10 months ago

1.2k
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

3 months ago

512

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components