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

2.1k

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.8k
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

7 months ago

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

8 months ago

729
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

3 years ago

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

Author:
Manuela Bianka

3 years ago

11.9k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.4k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

9.1k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

11 months ago

1.4k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

2 years ago

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

Author:
bonheur dev

8 months ago

569

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components