Components
Tailwind CSS Accordion - Madhuranjan UI
Effortlessly integrate our Tailwind CSS accordion component to display hidden information dynamically. Built entirely with Tailwind CSS, no additional dependencies required. Just copy and paste into your project and start using it instantly.
Simple Accordion
This is a basic accordion built using only Tailwind CSS. It provides a minimalist yet functional design, making it a great choice for displaying collapsible content without additional styling.
Accordion 1
This is the content for Accordion 1. It provides useful information about the topic.
Accordion 2
This is the content for Accordion 2. It contains additional details that expand when clicked.
Accordion 3
This is the content for Accordion 3. Click to reveal more details about this section.
1<div class="max-w-5xl mx-auto p-3 bg-white dark:bg-gray-900 shadow-lg transition-all">
2 <div class="space-y-4">
3
4 <details class="group bg-gray-100 dark:bg-gray-800 rounded-lg p-3 shadow-md transition-all ">
5 <summary class="flex items-center justify-between gap-3 cursor-pointer text-lg font-semibold text-gray-900 dark:text-white transition-all px-3 py-1 rounded-lg [&::-webkit-details-marker]:hidden [&::marker]:hidden">
6 <span>Accordion 1</span>
7 <svg class="h-6 w-6 transform transition-transform duration-300 group-open:rotate-180 text-gray-600 dark:text-gray-400"
8 fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
10 </svg>Border Accordion
This accordion version includes a border around each item, adding better separation between sections. Ideal for structured FAQs where clarity is important.
Accordion 1
This is the content for Accordion 1. It provides useful information about the topic.
Accordion 2
This is the content for Accordion 2. It contains additional details that expand when clicked.
Accordion 3
This is the content for Accordion 3. Click to reveal more details about this section.
1<div class="max-w-5xl mx-auto p-2 bg-white dark:bg-black transition-all">
2 <div class="space-y-4">
3
4 <details class="group bg-gray-100 dark:bg-gray-900 rounded-lg p-3 transition-all border-2 border-gray-400 ">
5 <summary class="flex items-center justify-between gap-3 cursor-pointer text-lg font-semibold text-gray-900 dark:text-white transition-all px-3 py-1 rounded-lg [&::-webkit-details-marker]:hidden [&::marker]:hidden">
6 <span>Accordion 1</span>
7 <svg class="h-6 w-6 transform transition-transform duration-300 group-open:rotate-180 text-gray-600 dark:text-gray-400"
8 fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
10 </svg>Shadow Accordion
This accordion enhances the UI by adding soft shadow effects, making the elements visually distinct and providing a modern, elevated look.
What is Tailwind CSS?
Tailwind CSS is a utility-first framework that provides low-level utility classes to build custom UI designs quickly.
How do I install Tailwind CSS?
You can install Tailwind CSS via npm, yarn, or a CDN. Example:npm install -D tailwindcss.
Can I customize Tailwind?
Yes! Tailwind is highly customizable via thetailwind.config.js file.
1<div class="max-w-4xl mx-auto p-3 space-y-1 bg-white dark:bg-gray-900 shadow-xl rounded-xl transition-all">
2 <div class="space-y-3">
3 <details class="group bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 shadow-md transition-all">
4 <summary class="flex items-center justify-between gap-3 cursor-pointer text-lg font-semibold text-gray-900 dark:text-white transition-all px-3 rounded-lg dark:hover:bg-gray-800 [&::-webkit-details-marker]:hidden [&::marker]:hidden">
5 <span>What is Tailwind CSS?</span>
6 <svg class="h-6 w-6 transform transition-transform duration-300 group-open:rotate-180 text-gray-600 dark:text-gray-400"
7 fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
8 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
9 </svg>
10 </summary>Nested Accordion
The inner accordion structure allows nesting, making it useful for multi-level FAQs where users can expand additional sub-sections inside an already expanded item.
Main FAQ 1
This is the content for Main FAQ 1. Below are more specific FAQs related to this topic:
Inner FAQ 1.1
This is the answer to Inner FAQ 1.1.
Main FAQ 2
This is the content for Main FAQ 2. Below are more specific FAQs related to this topic:
Inner FAQ 2.1
This is the answer to Inner FAQ 2.1.
Inner FAQ 2.2
This is the answer to Inner FAQ 2.2.
Main FAQ 3
This is the content for Main FAQ 3. Below are more specific FAQs related to this topic:
Inner FAQ 3.1
This is the answer to Inner FAQ 3.1.
Inner FAQ 3.2
This is the answer to Inner FAQ 3.2.
Inner FAQ 3.3
This is the answer to Inner FAQ 3.3.
1<div class="max-w-5xl mx-auto p-3 bg-white dark:bg-gray-900 shadow-xl transition-all">
2
3 <div class="space-y-6">
4
5 <details class="group bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-900 rounded-lg p-2 shadow-md transition-all">
6 <summary class="flex items-center justify-between gap-3 cursor-pointer text-lg font-semibold text-gray-900 dark:text-white transition-all py-2 px-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 [&::-webkit-details-marker]:hidden [&::marker]:hidden">
7 <span className="font-semibold">Main FAQ 1</span>
8 <svg class="h-6 w-6 transform transition-transform duration-300 group-open:rotate-180 text-gray-800 dark:text-gray-400"
9 fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
10 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />Plus Animation Accordion
This accordion includes an animated plus (+) and minus (-) icon, enhancing the user experience by visually indicating whether an item is open or closed.
What is Tailwind CSS?
Tailwind CSS is a utility-first framework that helps you build custom UI designs faster with predefined utility classes.
Is Tailwind CSS free?
Yes, Tailwind CSS is completely free and open-source. You can use it for any personal or commercial project.
Can I customize Tailwind CSS?
Absolutely! Tailwind is highly customizable using the tailwind.config.js file.
How do I install Tailwind CSS?
You can install Tailwind via npm, yarn, or use a CDN. Example:npm install -D tailwindcss.
1<div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-900 shadow-xl rounded-xl transition-all">
2
3
4 <div class="space-y-4">
5 <details class="group bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-5 shadow-md transition-all">
6 <summary class="flex items-center justify-between cursor-pointer text-lg font-semibold text-gray-900 dark:text-white transition-all [&::-webkit-details-marker]:hidden [&::marker]:hidden">
7 <span>What is Tailwind CSS?</span>
8 <svg class="h-6 w-6 text-purple-600 dark:text-purple-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12h-12m6-6v12" class="group-open:hidden" />
10 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" class="hidden group-open:block" />