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

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

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19k
Accordion
uses Flobite.js for interactivity

Author:
Piet Vriend

2 years ago

14.4k
simple badge

Author:
Muhammad Imran

11 months ago

1.6k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.9k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2.3k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

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

Author:
Manuela Bianka

3 years ago

11.7k
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

8 months ago

1.3k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

2 years ago

17.2k
Float Input

Author:
Maxim

1 year ago

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

11 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components