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

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

File Upload
Image or file upload card

Author:
Khalid

1 year ago

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

Author:
bonheur dev

4 months ago

319
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.5k
Accordion section

Author:
Lyra Ravensong

2 years ago

15k
File input field

Author:
Lyra Ravensong

2 years ago

13.1k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.8k
Input field with logo
Logo on the left side of the input field

Author:
Conan Hilton

3 years ago

10.6k
Login Form with Icon

Author:
Prashant

3 years ago

17.3k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

1 year ago

2.6k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.7k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

1 month ago

144

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components