Home
Cristian
details & summary beautiful styling & animation

details & summary beautiful styling & animation

This tailwind example is contributed by Cristian, on 25-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is collapsible

Accordion

Author Cristian

1.7k

Fork Fullscreen

<section class="bg-white p-2 md:p-6 rounded-2xl border border-gray-300 max-w-xl mx-auto mt-[15vh]">
  <details open class="border-b border-gray-300">
    <summary class="outline-none list-none py-6 text-lg font-bold cursor-pointer relative flex justify-between rounded-lg select-none hover:after:opacity-75 focus-visible:ring-4 focus-visible:ring-gray-100 after:content-[''] after:absolute after:right-0 after:top-6 after:h-6 after:w-6 after:bg-[url('data:image/svg+xml;charset=UTF-8,<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'></path></svg>')] after:opacity-40 after:transition-transform after:duration-150 after:ease">
      Lorem ipsum
    </summary>
    <article class="animate-slide-in">
      <p class="text-gray-500 mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur voluptatibus corrupti molestiae esse! Eveniet sequi recusandae, aspernatur ducimus saepe rem nulla error nam, enim animi tenetur labore ex. Aliquid, accusantium?</p>
    </article>
  </details>

<details class="border-b border-gray-300">
    <summary class="outline-none list-none py-6 text-lg font-bold cursor-pointer relative flex justify-between rounded-lg select-none hover:after:opacity-75 focus-visible:ring-4 focus-visible:ring-gray-100 after:content-[''] after:absolute after:right-0 after:top-6 after:h-6 after:w-6 after:bg-[url('data:image/svg+xml;charset=UTF-8,<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'></path></svg>')] after:opacity-40 after:transition-transform after:duration-150 after:ease">
      Dolor sit amet
    </summary>
    <article class="animate-slide-in">
      <p class="text-gray-500 mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur voluptatibus corrupti molestiae esse! Eveniet sequi recusandae, aspernatur ducimus saepe rem nulla error nam, enim animi tenetur labore ex. Aliquid, accusantium?</p>
    </article>
  </details>

<details>
    <summary class="outline-none list-none py-6 text-lg font-bold cursor-pointer relative flex justify-between rounded-lg select-none hover:after:opacity-75 focus-visible:ring-4 focus-visible:ring-gray-100 after:content-[''] after:absolute after:right-0 after:top-6 after:h-6 after:w-6 after:bg-[url('data:image/svg+xml;charset=UTF-8,<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'></path></svg>')] after:opacity-40 after:transition-transform after:duration-150 after:ease">
      Consectetur adipisicing
    </summary>
    <article class="animate-slide-in">
      <p class="text-gray-500 mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur voluptatibus corrupti molestiae esse! Eveniet sequi recusandae, aspernatur ducimus saepe rem nulla error nam, enim animi tenetur labore ex. Aliquid, accusantium?</p>
    </article>
  </details>
</section>

Related Examples

Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

1 year ago

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

4 months ago

834
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

9 months ago

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

9 months ago

899
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

1 month ago

74
bonimator dash board
bonimator dash board

Author:
Bonimater

2 months ago

182
Accordion section

Author:
Lyra Ravensong

2 years ago

15k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

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

4 months ago

409
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

11 months ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components