Home
Maxim
Accordion block

Accordion block

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

This tailwind example is contributed by Maxim, on 13-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is collapsible

Input Accordion

Author Maxim

1.7k

Fork Fullscreen

<div class="mx-auto max-w-screen-lg">
  <div
    class="divide-y divide-stone-100 dark:divide-stone-700 overflow-hidden rounded-lg border border-indigo-200 dark:border-indigo-900 bg-white dark:bg-gray-900 shadow-sm">
    <details class="group" open>
      <summary
        class="flex cursor-pointer list-none items-center justify-between p-4 text-lg font-medium text-indigo-900 dark:text-indigo-100 group-open:bg-indigo-50 dark:group-open:bg-indigo-900/20">
        Is it possible to live on Mars?
        <div class="text-indigo-500 dark:text-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </div>
      </summary>
      <div class="border-t border-t-stone-100 dark:border-t-stone-700 p-4 text-indigo-500 dark:text-indigo-400">While
        it's not currently possible, scientists and space agencies are working on technologies to make human habitation
        on Mars a reality in the future. Significant challenges like radiation protection, sustainable food and water
        supplies, and creating a breathable atmosphere need to be overcome.</div>
    </details>
    <details class="group">
      <summary
        class="flex cursor-pointer list-none items-center justify-between p-4 text-lg font-medium text-indigo-900 dark:text-indigo-100 group-open:bg-indigo-50 dark:group-open:bg-indigo-900/20">
        How long would it take to travel to Mars?
        <div class="text-indigo-500 dark:text-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </div>
      </summary>
      <div class="border-t border-t-stone-100 dark:border-t-stone-700 p-4 text-indigo-500 dark:text-indigo-400">Using
        current technology, a one-way trip to Mars would take about 6-8 months. The exact duration depends on the
        positions of Earth and Mars in their orbits, as well as the propulsion technology used for the spacecraft.</div>
    </details>
    <details class="group">
      <summary
        class="flex cursor-pointer list-none items-center justify-between p-4 text-lg font-medium text-indigo-900 dark:text-indigo-100 group-open:bg-indigo-50 dark:group-open:bg-indigo-900/20">
        What are the main challenges of living on Mars?
        <div class="text-indigo-500 dark:text-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="block h-5 w-5 transition-all duration-300 group-open:rotate-180">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </div>
      </summary>
      <div class="border-t border-t-stone-100 dark:border-t-stone-700 p-4 text-indigo-500 dark:text-indigo-400">The main
        challenges include: protecting against harmful radiation, creating a sustainable food and water supply,
        generating breathable air, dealing with extreme temperature fluctuations, maintaining physical and mental health
        in a low-gravity environment, and overcoming communication delays with Earth.</div>
    </details>
  </div>
</div>

Related Examples

portifolio
upgraded portifolio

Author:
Bonimater

5 months ago

636
flex row

Author:
Yanjun Lin

4 months ago

212
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

2.1k
Search input

Author:
Leon Bachmann

2 years ago

10.9k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

12.2k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

7 months ago

608
File Upload
Image or file upload card

Author:
Khalid

1 year ago

3.5k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

1 year ago

1.8k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

11 months ago

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

3 months ago

284

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components