Home
Piet Vriend
Accordion

Accordion

uses Flobite.js for interactivity

This tailwind example is contributed by Piet Vriend, on 16-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is collapsible

Accordion

Author Piet Vriend

15.2k

Fork Fullscreen

<div class="max-w-screen-md mx-auto p-10 dark:bg-gray-800">
	<div id="accordion-flush" data-accordion="collapse"
		data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
		data-inactive-classes="text-gray-500 dark:text-gray-400">
		<h3 id="accordion-flush-heading-1">
			<button type="button"
				class="flex items-center justify-between w-full py-5 px-4 font-medium text-left border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
				data-accordion-target="#accordion-flush-body-1" aria-expanded="true"
				aria-controls="accordion-flush-body-1">
				<span>Can I use Landwind in open-source projects?</span>
				<svg data-accordion-icon="" class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
			</button>
		</h3>
		<div id="accordion-flush-body-1" class="" aria-labelledby="accordion-flush-heading-1">
			<div class="py-5 border-b border-gray-200 dark:border-gray-700">
				<p class="mb-2 text-gray-500 dark:text-gray-400">Landwind is an open-source library of interactive
					components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
				<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="#"
						class="text-purple-600 dark:text-purple-500 hover:underline">get started</a> and start
					developing websites even faster with components on top of Tailwind CSS.</p>
			</div>
		</div>
		<h3 id="accordion-flush-heading-2">
			<button type="button"
				class="flex items-center justify-between w-full py-5 px-4 font-medium text-left border-b border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400"
				data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
				aria-controls="accordion-flush-body-2">
				<span>Is there a Figma file available?</span>
				<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
			</button>
		</h3>
		<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
			<div class="py-5 border-b border-gray-200 dark:border-gray-700">
				<p class="mb-2 text-gray-500 dark:text-gray-400">Landwind is first conceptualized and designed using the
					Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
				<p class="text-gray-500 dark:text-gray-400">Check out the <a href="#"
						class="text-purple-600 dark:text-purple-500 hover:underline">Figma design system</a> based on
					the utility classes from Tailwind CSS and components from Landwind.</p>
			</div>
		</div>
		<h3 id="accordion-flush-heading-3">
			<button type="button"
				class="flex items-center justify-between w-full py-5 px-4 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
				data-accordion-target="#accordion-flush-body-3" aria-expanded="false"
				aria-controls="accordion-flush-body-3">
				<span>What are the differences between Landwind and Tailwind UI?</span>
				<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
			</button>
		</h3>
		<div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
			<div class="py-5 border-b border-gray-200 dark:border-gray-700">
				<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
					Landwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another
					difference is that Landwind relies on smaller and standalone components, whereas Tailwind UI offers
					sections of pages.</p>
				<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Landwind,
					Landwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
					of two worlds.</p>
				<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
				<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
					<li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Landwind Pro</a></li>
					<li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Tailwind UI</a></li>
				</ul>
			</div>
		</div>
		<h3 id="accordion-flush-heading-4">
			<button type="button"
				class="flex items-center justify-between w-full py-5 px-4 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
				data-accordion-target="#accordion-flush-body-4" aria-expanded="false"
				aria-controls="accordion-flush-body-4">
				<span>What about browser support?</span>
				<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
					xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clip-rule="evenodd"></path>
				</svg>
			</button>
		</h3>
		<div id="accordion-flush-body-4" class="hidden" aria-labelledby="accordion-flush-heading-4">
			<div class="py-5 border-b border-gray-200 dark:border-gray-700">
				<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
					Landwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another
					difference is that Landwind relies on smaller and standalone components, whereas Tailwind UI offers
					sections of pages.</p>
				<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Landwind,
					Landwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
					of two worlds.</p>
				<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
				<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
					<li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Landwind Pro</a></li>
					<li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Tailwind UI</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Related Examples

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k
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
Accordion section

Author:
Lyra Ravensong

2 years ago

15.3k
Accordion with minimum javascript

Author:
Anonymous

2 years ago

9.1k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

Author:
Manuela Bianka

3 years ago

11.8k
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Author:
Prajwal Hallale

2 years ago

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

4 months ago

485
portifolio
upgraded portifolio

Author:
Bonimater

6 months ago

722
aportifolio book
aportifolio book

Author:
Bonimater

5 months ago

737
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

1 year ago

1.9k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components