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

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

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

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

Author:
Maxim

11 months ago

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

166
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.2k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

14.6k
portifolio
upgraded portifolio

Author:
Bonimater

3 months ago

566
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
FAQ section
An expanding frequently asked questions section made without using javascript.

Author:
Manuela Bianka

3 years ago

11.7k
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

4 months ago

663
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

10 months ago

1.1k
Services
explore our awesome Services

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

1 year ago

2.6k
aportifolio book
aportifolio book

Author:
Bonimater

3 months ago

488

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components