details & summary beautiful styling & animation

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

Accordion

Author Cristian

Tailwind v3.4 2.9k 4

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

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.

Indra

1 year ago

1.3k
Accordion section

Lyra Ravensong

3 years ago

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

Maxim

1 year ago

2.8k
Tailwind FAQ accordion

yousef

2 years ago

6.2k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
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."

Nicole Shalom

1 year ago

1.8k
Accordion
uses Flobite.js for interactivity

Piet Vriend

3 years ago

16.1k
HOT DOGS WEB SITE
it combine the hot dogs delivary

bonheur dev

1 year ago

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

Manuela Bianka

4 years ago

12.3k
bonimator dash board
bonimator dash board

Bonimater

1 year ago

910
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

5 months ago

302
Accordions & FAQs with css chevrons: No javascript needed
Chevron toggle without using nested SVG images.

Sherry Lynne

2 months ago

139