Components
Tailwind CSS Accordion
Using data attribute options, use the accordion component to display hidden information based on the child elements' collapse and expand states.
Requires Pagedone JS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
Based on the Tailwind CSS utility classes and JavaScript from Pagedone, the tailwind accordion component is a group of vertically collapsing header and body components that may be used to reveal and hide content.
The "Frequently Asked Questions" area of a website or page, where you can display questions and answers for each child element, is a common use case.
There are two main options to initialize the accordion component:
data-accordion="default-accordion"show only one active child elementdata-accordion="always-open-accordion"keep multiple elements open
Firstly you need to set the data-accordion="{selector}" data
attribute to the group of accordion, you need to add accordion-toggle class to
button
element and accordion-content class to the accordion body.
Give id to accordion class where the value is the id of the accordion content
class and the active class to mark the active or inactive state of the accordion.
Default accordion
When extending a single child element, use the
data-accordion="default-accordion" property to collapse all other child
elements in
tailwind ui accordion.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.
Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pb-4 border-b border-solid border-gray-200' id='basic-heading-one-default'>
<button class='accordion-toggle group accordion-active:text-indigo-600 inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 active:text-indigo-600' aria-controls='basic-collapse-one-default'>
<h5> How to create an account? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-one-default'>
<p class='text-base text-gray-600 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-two-default'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-two-default'>
<h5> Have any trust issue? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-two-default'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-three-default'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-three-default'>
<h5> How can I reset my password? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-default' class='accordion-content w-full px-0 overflow-hidden pr-4 ' aria-labelledby='basic-heading-three-default'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
</div>Always Open
Use this tailwind css accordion to preserve previously opened accordion
elements, use the data-accordion="always-open-accordion" option.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.
Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pb-4 border-b border-solid border-gray-200 active' id='basic-heading-one-with-arrow-always-open'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open ' aria-controls='basic-collapse-one-with-arrow-always-open'>
<h5> How to create an account? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open' class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 72px;" aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-base text-gray-600 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-two-with-arrow-always-open'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-two-with-arrow-always-open'>
<h5> Have any trust issue? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open' class='accordion-content w-full px-0 overflow-hidden pr-4' aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
<div class='accordion py-4 border-b border-solid border-gray-200' id='basic-heading-three-with-arrow-always-open'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5> How can I reset my password? </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open' class='accordion-content w-full px-0 overflow-hidden pr-4' aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Our focus on providing robust and user-friendly content management capabilities ensures that you can manage your content with confidence, and achieve your content marketing goals with ease.</p>
</div>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
With Border
Use this tailwind accordion example to add border and background effect in the accordion component.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion border border-solid border-gray-300 p-4 rounded-xl transition duration-500 accordion-active:bg-indigo-50 accordion-active:border-indigo-600 mb-8 lg:p-4' id='basic-heading-one-with-icon'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-one-with-icon'>
<h5> How can I reset my password? </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-icon' class='accordion-content w-full overflow-hidden pr-4' aria-labelledby='basic-heading-one'>
<p class='text-base text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='accordion border border-solid border-gray-300 p-4 rounded-xl accordion-active:bg-indigo-50 accordion-active:border-indigo-600 mb-8 lg:p-4' id='basic-heading-two-with-icon'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-two-with-icon'>
<h5> How do I update my billing information? </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-icon' class='accordion-content w-full overflow-hidden pr-4' aria-labelledby='basic-heading-two'>
<p class='text-base text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='accordion border border-solid border-gray-300 p-4 rounded-xl accordion-active:bg-indigo-50 accordion-active:border-indigo-600 mb-8 lg:p-4' id='basic-heading-three-with-icon'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-three-with-icon'>
<h5> How can I contact customer support? </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 ' aria-labelledby='basic-heading-three'>
<p class='text-base text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
</div>Arrow style
Use this tailwind collapse accordion when the accordion element is extended, you can optionally set an element to rotate 180 degrees by using the data-accordion-icon data attribute. It won't rotate if the data attribute isn't set.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.
<div class='accordion-group ' data-accordion="default-accordion">
<div class='group accordion mb-8 py-4 px-6 bg-gray-50 rounded-xl transition-all duration-500 hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-one-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left leading-8 text-gray-900 w-full transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-one-with-arrow'>
<h5> How can I reset my password? </h5>
<svg class='text-gray-400 transition duration-500 w-6 h-6 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-90' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M3 12L19 12M14 18L19.2929 12.7071C19.6262 12.3738 19.7929 12.2071 19.7929 12C19.7929 11.7929 19.6262 11.6262 19.2929 11.2929L14 6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-one-with-arrow'>
<p class=' text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='group accordion mb-8 py-4 px-6 bg-gray-50 rounded-xl transition-all duration-500 hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-two-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left leading-8 text-gray-900 w-full transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-two-with-arrow'>
<h5> How do I update my profile information? </h5>
<svg class='text-gray-400 transition duration-500 w-6 h-6 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-90' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M3 12L19 12M14 18L19.2929 12.7071C19.6262 12.3738 19.7929 12.2071 19.7929 12C19.7929 11.7929 19.6262 11.6262 19.2929 11.2929L14 6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-two-with-arrow'>
<p class=' text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
<div class='group accordion mb-8 py-4 px-6 bg-gray-50 rounded-xl transition-all duration-500 hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-three-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between text-left leading-8 text-gray-900 w-full transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 ' aria-controls='basic-collapse-three-with-arrow'>
<h5> How do I update my billing information? </h5>
<svg class='text-gray-400 transition duration-500 w-6 h-6 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-90' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M3 12L19 12M14 18L19.2929 12.7071C19.6262 12.3738 19.7929 12.2071 19.7929 12C19.7929 11.7929 19.6262 11.6262 19.2929 11.2929L14 6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow' class='accordion-content w-full px-0 overflow-hidden ' aria-labelledby='basic-heading-three-with-arrow'>
<p class=' text-gray-900 leading-6'>To create an account, find the 'Sign up' or 'Create account' button, fill out the registration form with your personal information, and click 'Create account' or 'Sign up.' Verify your email address if needed, and then log in to start using the platform.</p>
</div>
</div>
</div>Color options
This tailwind accordion animation example can be used when the accordion is enlarged, use the data-active-classes and data-inactive-classes to set the active and inactive classes for the header element. You can apply as many classes as you like, just remember to space them out. The default classes will be used if the data attribute is empty or not set.
To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.
To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.
To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.
<div class='accordion-group ' data-accordion="default-accordion">
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-one-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-one-with-arrow'>
<h5> How do I update my billing information? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-one-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-two-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-two-with-arrow'>
<h5> How can I contact customer support? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-two-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-three-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-three-with-arrow'>
<h5> How do I update my profile information? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow' class='accordion-content w-full px-0 overflow-hidden ' aria-labelledby='basic-heading-three-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
</div>
Examples
Tailwind CSS Accordion Examples
Using data attribute options, use the accordion component to display hidden information based on the child elements' collapse and expand states.
Form Accordion Example
A multi-step form using accordion sections for personal, contact, and address information with icon indicators
<div class="w-full max-w-md bg-white rounded-lg shadow overflow-hidden mx-auto border border-b-0">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pb-4 px-4 py-3 border-b border-solid border-gray-200'
id='basic-heading-one-default'>
<button
class='accordion-toggle group accordion-active:text-indigo-600 inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 active:text-indigo-600'
aria-controls='basic-collapse-one-default'>
<h5 class="flex items-center gap-2"><svg
class="w-4 h-4 group-hover:text-indigo-600 transition-all duration-500" width="24"
height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path
d="M20 21V20.1429C20 19.0805 20 18.5493 19.8997 18.1099C19.5578 16.6119 18.3881 15.4422 16.8901 15.1003C16.4507 15 15.9195 15 14.8571 15H10C8.13623 15 7.20435 15 6.46927 15.3045C5.48915 15.7105 4.71046 16.4892 4.30448 17.4693C4 18.2044 4 19.1362 4 21"
stroke="currentColor" stroke-width="null" stroke-linecap="round" class="my-path">
</path>
</svg> Personal Information</h5>
<svg
class='text-gray-600 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-default'
class='accordion-content w-full px-0 overflow-hidden pr-4 '
aria-labelledby='basic-heading-one-default'>
<div class="flex flex-col gap-2 py-4">
<input type="text" placeholder="First Name"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
<input type="text" placeholder="Last Name"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
</div>
</div>
</div>
<div class='accordion pb-4 px-4 py-3 border-b border-solid border-gray-200'
id='basic-heading-one-default'>
<button
class='accordion-toggle group accordion-active:text-indigo-600 inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 active:text-indigo-600'
aria-controls='basic-collapse-one-default'>
<h5 class="flex items-center gap-2"><svg
class="w-4 h-4 group-hover:text-indigo-600 transition-all duration-500"
viewBox="0 0 24 24" fill="none" stroke='currentColor'
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke-width="null" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke-width="null" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg> Contact Information</h5>
<svg
class='text-gray-600 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-default'
class='accordion-content w-full px-0 overflow-hidden pr-4 '
aria-labelledby='basic-heading-one-default'>
<div class="flex flex-col gap-2 py-4">
<input type="email" placeholder="Email"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
<input type="tel" placeholder="Phone"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
</div>
</div>
</div>
<div class='accordion pb-4 px-4 py-3 border-b border-solid border-gray-200'
id='basic-heading-one-default'>
<button
class='accordion-toggle group accordion-active:text-indigo-600 inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 active:text-indigo-600'
aria-controls='basic-collapse-one-default'>
<h5 class="flex items-center gap-2"><svg
class="w-4 h-4 group-hover:text-indigo-600 transition-all duration-500"
viewBox="0 0 24 24" fill="none" stroke='currentColor'
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.81207 6.05324C9.53921 2.87158 14.4614 2.87158 17.1885 6.05324C19.382 8.61225 19.382 12.3884 17.1885 14.9474L13.0785 19.7424C12.7864 20.0831 12.6404 20.2535 12.4797 20.3413C12.1809 20.5045 11.8197 20.5045 11.5209 20.3413C11.3602 20.2535 11.2142 20.0831 10.9221 19.7424L6.81207 14.9474C4.61863 12.3884 4.61863 8.61225 6.81207 6.05324Z"
stroke-width="null" class="my-path"></path>
<path
d="M14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke-width="null" class="my-path"></path>
</svg> Address Information</h5>
<svg
class='text-gray-600 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-default'
class='accordion-content w-full px-0 overflow-hidden pr-4 '
aria-labelledby='basic-heading-one-default'>
<div class="flex flex-col gap-2 py-4">
<input type="text" placeholder="Street"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
<input type="text" placeholder="City"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
<input type="text" placeholder="State"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
<input type="text" placeholder="Zip"
class="border rounded-md px-3 py-2 w-full hover:border-indigo-600 focus:border-indigo-600 outline-none transition-all duration-500" />
</div>
</div>
</div>
</div>
</div>Accordion Form with Plus Trigger Example
A accordion form with plus/minus toggle indicators that expand and collapse sections for personal, contact, and address data
<div class='accordion-group ' data-accordion="default-accordion">
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-one-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-one-with-arrow'>
<h5> How do I update my billing information? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-one-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-two-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-two-with-arrow'>
<h5> How can I contact customer support? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow' class='accordion-content w-full px-0 overflow-hidden' aria-labelledby='basic-heading-two-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
<div class='accordion py-4 px-6 mb-7 transition-all duration-500 bg-gray-50 rounded-2xl hover:bg-indigo-50 accordion-active:bg-indigo-50' id='basic-heading-three-with-arrow'>
<button class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 text-left hover:text-indigo-600 accordion-active:text-indigo-600' aria-controls='basic-collapse-three-with-arrow'>
<h5> How do I update my profile information? </h5>
<svg class='text-gray-500 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180' width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow' class='accordion-content w-full px-0 overflow-hidden ' aria-labelledby='basic-heading-three-with-arrow'>
<p class='text-base text-gray-900 leading-6'>To contact customer support, look for a 'Contact us' or 'Help' button or link on the website or platform. You may be able to email, call, or chat with customer support for assistance.</p>
</div>
</div>
</div>Multi-Level Accordion Example
A nested accordion structure combining Accordion and Collapsible components for hierarchical content with multiple expandable levels
Quo quaerat demergo vicissitudo deputo. Cado vel vaco aeternus capto trepide atavus
commodi.
Demulceo speculum quam mollitia subvenio illum acquiro ara bonus caveo.
Aer damno amet paulatim viridis sufficio. Ars cubitum comburo sonitus. Aspernatur
amplexus
solutio bis.
Argentum umbra sperno adhuc truculenter voluptates cursus corrupti creta cruciamentum.
Inventore pariatur conspergo arca eum aspicio addo causa. Traho maxime adfectus
doloribus
sustineo advoco decens tabernus.
Corporis vox deprecator temperantia torrens assumenda. Derideo beatae corrigo cognomen
usus
damnatio comptus adflicto venia. Balbus sum solus sit congregatio adfero fugiat degero
celo.
Virgo calco adflicto vicinus appello. Absum tum capillus titulus acceptus tenus
laudantium
sapiente. Spiculum compono doloremque cuius inventore.
Facere charisma sui stultus corrupti cribro qui vulnus. Carbo numquam voluptate trucido
ventus quam. Administratio antea molestias.
Adiuvo a numquam tredecim titulus explicabo conventus. Arx curo vulnus certe. Audacia
vacuus
cresco curso.
Usitas contego pariatur cresco consequatur vivo currus thalassinus ancilla totidem.
Trucido
suffragium adulescens utor libero. Amissio consuasor varietas dolore tristis tracto.
<div class="w-full max-w-md mx-auto border rounded-lg bg-white">
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500 "
data-accordion-btn>
Proactive eco-centric database
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Profound homogeneous emulation
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Quo quaerat demergo vicissitudo deputo. Cado vel vaco aeternus capto trepide atavus
commodi.
Demulceo speculum quam mollitia subvenio illum acquiro ara bonus caveo.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Managed contextually-based implementation
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Aer damno amet paulatim viridis sufficio. Ars cubitum comburo sonitus. Aspernatur
amplexus
solutio bis.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Phased dedicated methodology
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center justify-start gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Open-architected tangible model
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Argentum umbra sperno adhuc truculenter voluptates cursus corrupti creta cruciamentum.
Inventore pariatur conspergo arca eum aspicio addo causa. Traho maxime adfectus
doloribus
sustineo advoco decens tabernus.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center justify-start text-start gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Secured asymmetric workforce
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Corporis vox deprecator temperantia torrens assumenda. Derideo beatae corrigo cognomen
usus
damnatio comptus adflicto venia. Balbus sum solus sit congregatio adfero fugiat degero
celo.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Exclusive next generation flexibility
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Phased disintermediate algorithm
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Virgo calco adflicto vicinus appello. Absum tum capillus titulus acceptus tenus
laudantium
sapiente. Spiculum compono doloremque cuius inventore.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Ergonomic directional structure
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Facere charisma sui stultus corrupti cribro qui vulnus. Carbo numquam voluptate trucido
ventus quam. Administratio antea molestias.
</div>
</div>
</div>
</div>
<div class="overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Public-key intermediate initiative
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Automated leading edge flexibility
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Adiuvo a numquam tredecim titulus explicabo conventus. Arx curo vulnus certe. Audacia
vacuus
cresco curso.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Advanced client-driven website
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Usitas contego pariatur cresco consequatur vivo currus thalassinus ancilla totidem.
Trucido
suffragium adulescens utor libero. Amissio consuasor varietas dolore tristis tracto.
</div>
</div>
</div>
</div>
</div>Multi-level accordion with Icon Example
A nested accordion with icon indicators for each parent section, combining visual hierarchy with expandable nested content levels
Cohors correptius vapulus callide commemoro ustilo. Ratione villa attollo cupressus.
Praesentium
spectaculum ea ratione peccatus valde tyrannus.
Tener conventus commodi solutio. Tenuis combibo confugo tibi civis. Celo annus cognatus
aperte
video arbustum absconditus cruentus alioqui vestigium.
Vulariter venia cupiditate aperte. Sonitus solio vitae adhaero delibero adficio allatus
vita
cibus. Crur cupiditate claro.
Amet adipisci neque quis bardus consequatur solio error. Canonicus derelinquo aeger
calco
soluta
supplanto inflammatio terebro. Pecus corona vulnero tracto crinis corrigo repellendus
barba.
Cras crapula animus altus aro umbra amet clam cognomen maiores. Alienus pel labore.
Coaegresco
demum taedium desidero ventosus amet nobis consequatur dolores stillicidium.
Acies avaritia votum. Angulus crepusculum varietas cruciamentum vivo velit cotidie.
Spiritus
quisquam tristis quibusdam aeger doloremque.
Magni demitto demoror thorax. Videlicet color bellum degero capio. Autem tondeo peior
tergiversatio cogo aliqua debeo.
Caelum patrocinor spoliatio atqui. Adipisci usque pecus avarus cotidie arbitro degenero
voco
attonbitus solutio. Aer speciosus cito inflammatio molestias aer spoliatio aetas.
<div class="w-full max-w-md mx-auto border rounded-lg bg-white">
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500 "
data-accordion-btn>
<span class="flex items-center gap-2">
<svg class="w-5 h-5 transition-transform duration-500" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke-width="null" stroke-linecap="round" class="my-path"></path>
<path d="M7 16H12" stroke-width="null" stroke-linecap="round" class="my-path"></path>
</svg>
AI-driven uniform encoding
</span>
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Innovative zero defect artificial intelligence
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Cohors correptius vapulus callide commemoro ustilo. Ratione villa attollo cupressus.
Praesentium
spectaculum ea ratione peccatus valde tyrannus.
</div>
</div>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Optimized incremental generative AI
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Tener conventus commodi solutio. Tenuis combibo confugo tibi civis. Celo annus cognatus
aperte
video arbustum absconditus cruentus alioqui vestigium.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
<span class="flex items-center gap-2">
<svg class="w-5 h-5 transition-transform duration-500" viewBox="0 0 24 24" fill="none"
stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke-width="null" class="my-path"></path>
</svg>Fully-configurable tangible throughput</span>
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Configurable full-range protocol
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Vulariter venia cupiditate aperte. Sonitus solio vitae adhaero delibero adficio allatus vita
cibus. Crur cupiditate claro.
</div>
</div>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Polarised bottom-line alliance
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Amet adipisci neque quis bardus consequatur solio error. Canonicus derelinquo aeger calco
soluta
supplanto inflammatio terebro. Pecus corona vulnero tracto crinis corrigo repellendus barba.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
<span class="flex items-center gap-2">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
stroke="currentColor">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke-width="null" stroke-miterlimit="10" stroke-linecap="round" class="my-path">
</path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke-width="null" class="my-path"></path>
</svg>
Horizontal analyzing website</span>
<svg class="svg-icon w-5 h-5 transition-transform duration-500" fill="none" stroke="currentColor"
stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Centralized fault-tolerant functionalities
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Cras crapula animus altus aro umbra amet clam cognomen maiores. Alienus pel labore.
Coaegresco
demum taedium desidero ventosus amet nobis consequatur dolores stillicidium.
</div>
</div>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Decentralized dedicated model
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Acies avaritia votum. Angulus crepusculum varietas cruciamentum vivo velit cotidie. Spiritus
quisquam tristis quibusdam aeger doloremque.
</div>
</div>
</div>
</div>
<div class="overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
<span class="flex items-center gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.9983 19.3008C22.9983 15.6557 20.0433 12.7007 16.3982 12.7007M16.3982 12.7007C12.753 12.7007 9.79803 15.6557 9.79803 19.3008M16.3982 12.7007C14.2718 12.7007 12.5481 10.9764 12.5481 8.85007C12.5481 6.72374 14.2719 5 16.3982 5C18.5245 5 20.2483 6.72374 20.2483 8.85007C20.2483 10.9764 18.5245 12.7007 16.3982 12.7007ZM1 18.2008C1 15.1632 3.46248 12.7007 6.50011 12.7007C8.0387 12.7007 9.42974 13.3324 10.428 14.3507M3.74818 9.87261C3.74818 11.3914 4.97942 12.6227 6.49823 12.6227C8.01704 12.6227 9.24828 11.3914 9.24828 9.87261C9.24828 8.3538 8.01704 7.12256 6.49823 7.12256C4.97942 7.12256 3.74818 8.3538 3.74818 9.87261Z"
stroke-width="null" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>Organized systemic time-frame</span>
<svg id="accordionIcon1" class="svg-icon w-5 h-5 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Profound value-added matrices
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Magni demitto demoror thorax. Videlicet color bellum degero capio. Autem tondeo peior
tergiversatio cogo aliqua debeo.
</div>
</div>
<div class="border-t bg-gray-50">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Centralized composite utilisation
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Caelum patrocinor spoliatio atqui. Adipisci usque pecus avarus cotidie arbitro degenero voco
attonbitus solutio. Aer speciosus cito inflammatio molestias aer spoliatio aetas.
</div>
</div>
</div>
</div>
</div>Multi-level Accordion with Plus Trigger Example
A hierarchical accordion using plus/minus indicators for parent sections with nested collapsible items for multi-level content navigation
Tumultus nulla deprimo. Tero vulgaris cogito. Valetudo cetera illum.
Accendo et eum contra coma calculus clibanus deludo cometes creator. Facere repudiandae
desino dedico tam claudeo. Vomer volo supellex quia comedo veniam minus iure aiunt.
Adinventitias certus tum sopor theologus. Sophismata appositus laboriosam crux debeo
tenax
sordeo tactus alter. Patria at vallum id arguo deputo aptus combibo tertius.
Optio desipio depono apostolus vilicus cito laborum spiritus. Cunae aliquam repellat
crinis
vilicus contigo venio urbs curso audeo. Curso tumultus coaegresco viduo.
Denuncio thermae trans cohaero chirographum averto molestias. Corrumpo ambitus venustas
provident. Candidus verto acer sono.
Ocer desolo adfero. Sponte venia tunc caute conculco comes pectus cerno adsidue optio.
Titulus qui nemo.
Exercitationem praesentium cupio aurum suus. Cohors utroque nisi aurum sulum venustas
vinitor voluptate. Bonus cura crinis solium vociferor.
Suppono varietas urbs amor depono quod coniecto. Tenuis arx minus utique tardus tardus
magnam aggero. Aggero labore civitas.
<div class="w-full max-w-md mx-auto border rounded-lg bg-white">
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500 "
data-accordion-btn>
Total actuating interface
<svg class="plus-icon w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg class="minus-icon w-4 h-4 hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.9985 12H5.00146" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Versatile encompassing success
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Tumultus nulla deprimo. Tero vulgaris cogito. Valetudo cetera illum.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Self-enabling heuristic strategy
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Accendo et eum contra coma calculus clibanus deludo cometes creator. Facere repudiandae
desino dedico tam claudeo. Vomer volo supellex quia comedo veniam minus iure aiunt.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Phased data-driven product
<svg class="plus-icon w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg class="minus-icon w-4 h-4 hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.9985 12H5.00146" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center justify-start gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Future-proofed secondary alliance
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Adinventitias certus tum sopor theologus. Sophismata appositus laboriosam crux debeo tenax
sordeo tactus alter. Patria at vallum id arguo deputo aptus combibo tertius.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center justify-start text-start gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Open-architected fresh-thinking firmware
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Optio desipio depono apostolus vilicus cito laborum spiritus. Cunae aliquam repellat crinis
vilicus contigo venio urbs curso audeo. Curso tumultus coaegresco viduo.
</div>
</div>
</div>
</div>
<div class="border-b overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Upgradable motivating circuit
<svg class="plus-icon w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg class="minus-icon w-4 h-4 hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.9985 12H5.00146" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Profit-focused mobile structure
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Denuncio thermae trans cohaero chirographum averto molestias. Corrumpo ambitus venustas
provident. Candidus verto acer sono.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg class="svg-icon w-4 h-4 transition-transform duration-500" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Extended sustainable circuit
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Ocer desolo adfero. Sponte venia tunc caute conculco comes pectus cerno adsidue optio.
Titulus qui nemo.
</div>
</div>
</div>
</div>
<div class="overflow-hidden">
<button
class="w-full flex justify-between items-center px-4 py-3 text-left font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-accordion-btn>
Expanded homogeneous strategy
<svg class="plus-icon w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg class="minus-icon w-4 h-4 hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.9985 12H5.00146" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
</button>
<div class="hidden" data-accordion-content>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Synchronised fault-tolerant array
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Exercitationem praesentium cupio aurum suus. Cohors utroque nisi aurum sulum venustas
vinitor voluptate. Bonus cura crinis solium vociferor.
</div>
</div>
<div class="border-t bg-neutral-100">
<button
class="w-full flex items-center gap-2 px-6 py-3 font-medium text-gray-600 hover:text-indigo-600 transition duration-500"
data-collapsible-btn>
<svg id="accordionIcon1" class="svg-icon w-4 h-4 transition-transform duration-500"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
</svg>
Implemented dedicated knowledge base
</button>
<div class="hidden pl-10 pb-3 text-base text-gray-600" data-collapsible-content>
Suppono varietas urbs amor depono quod coniecto. Tenuis arx minus utique tardus tardus
magnam aggero. Aggero labore civitas.
</div>
</div>
</div>
</div>
</div>Standard Accordion Example
A basic accordion component with default chevron indicators on the right side, perfect for simple collapsible content sections
Crux abscido comminor tero tabgo umquam thermae curtus. Amplexus cubo bos tego patruus. Concido accusator temptatio fuga labore velum testimonium textus.
Crastinus accusantium clam antepono charisma vis certus utrum succedo. Ullam error concido cerno adfectus. Utor amplus curatio aestus magnam numquam aetas carbo argentum.
Bene abstergo acsi cena super amet. Defungo timor sui articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.
<div class="w-full max-w-md bg-white border rounded-lg overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion py-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-black w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<h5> Face to face static moratorium </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 72px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-base text-gray-500 leading-6'>Crux abscido comminor tero tabgo umquam thermae
curtus. Amplexus cubo bos tego patruus. Concido accusator temptatio fuga labore velum
testimonium textus.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-black w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<h5> Distributed systemic portal</h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Crastinus accusantium clam antepono charisma vis
certus utrum succedo. Ullam error concido cerno adfectus. Utor amplus curatio aestus magnam
numquam aetas carbo argentum.</p>
</div>
</div>
<div class='accordion py-4 px-4 ' id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-black w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5> Adaptive client-driven archive</h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Bene abstergo acsi cena super amet. Defungo timor sui
articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.</p>
</div>
</div>
</div>
</div>Standard Accordion with Left Chevron Example
An accordion with left-aligned chevron indicators using flex-row-reverse for action-first navigation patterns
Crux abscido comminor tero tabgo umquam thermae Vigor cetera defaeco astrum recusandae auditor amita xiphias. Tamquam spiritus occaecati taceo. Porro nemo venio stultus adulatio urbs.
Ulterius voluptate cibo celo deleniti aetas communis attollo. Antea amitto conqueror. Advoco paens calco vindico abundans clementia amaritudo fuga confero sto.
Vallum explicabo abduco peior absconditus quibusdam aqua copia cauda. Stabilis alias cribro verbera decet allatus combibo desino depereo. Claro aut utilis tertius tergo facilis adimpleo villa tardus.
Molestiae vorax conor vinculum pel aliquam asperiores utpote sursum victus. Aetas cimentarius ut arceo depereo contigo repudiandae. Bos soluta sufficio tandem sursum optio cultellus astrum suasoria.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion py-4 px-4 border-b border-solid active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5>Future-proofed client-driven interface</h5>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden active' style="max-height: 72px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-600 leading-6'>Crux abscido comminor tero tabgo umquam
thermae
Vigor cetera defaeco astrum recusandae auditor amita xiphias. Tamquam spiritus occaecati
taceo. Porro nemo venio stultus adulatio urbs.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid ' id='basic-heading-two-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5> Sustainable client-driven website</h5>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Ulterius voluptate cibo celo deleniti aetas
communis attollo. Antea amitto conqueror. Advoco paens calco vindico abundans clementia
amaritudo fuga confero sto.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid ' id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5> Configurable optimizing circuit</h5>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Vallum explicabo abduco peior absconditus
quibusdam aqua copia cauda. Stabilis alias cribro verbera decet allatus combibo desino
depereo. Claro aut utilis tertius tergo facilis adimpleo villa tardus.</p>
</div>
</div>
<div class='accordion py-4 px-4' id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5> Adaptive well-modulated customer loyalty</h5>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Molestiae vorax conor vinculum pel aliquam
asperiores utpote sursum victus. Aetas cimentarius ut arceo depereo contigo repudiandae. Bos
soluta sufficio tandem sursum optio cultellus astrum suasoria.</p>
</div>
</div>
</div>
</div>Standard Accordion with Plus Trigger Example
An accordion using bold plus/minus toggle indicators instead of chevrons for more prominent expand/collapse affordance
Sub sono talis amiculum cruciamentum nam curso. Aveho delinquo surculus stillicidium urbs acquiro solum. Coadunatio apostolus terra volutabrum.
Venustas sed rerum cunabula trepide vaco vesper vapulus. Minus solio sopor crebro. Cunae ago desparatus.
Tui cupiditate via tutamen antea tergum umquam perferendis similique. Votum arcus pauci sollicito decumbo thermae tutamen. Teres crepusculum alter animus temeritas aspernatur tremo cultura demulceo admoveo.
Cursim illo nulla alienus adiuvo. Tamisium corroboro brevis vomer earum beatus usitas campana acer. Comedo talio concedo triumphus carcer conqueror vinitor utroque officia.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion py-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<h5> Implemented data-driven task-force </h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 72px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6'>Sub sono talis amiculum cruciamentum nam curso.
Aveho delinquo surculus stillicidium urbs acquiro solum. Coadunatio apostolus terra
volutabrum.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<h5>AI-driven real-time firmware</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Venustas sed rerum cunabula trepide vaco vesper
vapulus. Minus solio sopor crebro. Cunae ago desparatus.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5> Multi-tiered interactive matrices</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Tui cupiditate via tutamen antea tergum umquam
perferendis similique. Votum arcus pauci sollicito decumbo thermae tutamen. Teres
crepusculum alter animus temeritas aspernatur tremo cultura demulceo admoveo.</p>
</div>
</div>
<div class='accordion py-4 px-4'
id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5>Centralized encompassing paradigm</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6'>Cursim illo nulla alienus adiuvo. Tamisium corroboro
brevis vomer earum beatus usitas campana acer. Comedo talio concedo triumphus carcer
conqueror vinitor utroque officia.</p>
</div>
</div>
</div>
</div>Standard Accordion with Left Plus Trigger Example
An accordion with left-aligned plus or minus indicators, combining bold visual affordance with action-first layout for navigation contexts
Quis beatae adinventitias caries vix tui casso decerno aestivus adeo. Sunt antiquus blandior aufero. Pecto umbra color delicate cedo attero corrigo tergo.
Delinquo culpa facilis aegrus. Credo tero solio. Tantillus ver volaticus decretum venia saepe coepi.
Conculco delectatio dolor valens temptatio ipsam cenaculum adhuc confido. Versus agnitio vivo. Uter cognomen derelinquo depulso ter.
Cohors vir depereo. Damno arma conspergo vinco una unus compello clamo colligo. Angelus amplexus bis conspergo at ulterius.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion py-4 px-4 border-b border-solid active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Business-focused full-range hierarchy</h5>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden active' style="max-height: 72px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-600 leading-6'>Quis beatae adinventitias caries vix tui
casso decerno aestivus adeo. Sunt antiquus blandior aufero. Pecto umbra color delicate cedo
attero corrigo tergo.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid ' id='basic-heading-two-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5> Front-line tertiary circuit</h5>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Delinquo culpa facilis aegrus. Credo tero
solio. Tantillus ver volaticus decretum venia saepe coepi.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid ' id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Ergonomic tertiary utilisation</h5>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Conculco delectatio dolor valens temptatio
ipsam cenaculum adhuc confido. Versus agnitio vivo. Uter cognomen derelinquo depulso ter.
</p>
</div>
</div>
<div class='accordion py-4 px-4' id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center gap-4 leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Profit-focused tertiary alliance</h5>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='pl-10 text-sm text-gray-500 leading-6'>Cohors vir depereo. Damno arma conspergo vinco
una unus compello clamo colligo. Angelus amplexus bis conspergo at ulterius.</p>
</div>
</div>
</div>
</div>Standard Accordion Icon with Plus Trigger Example
An accordion combining category icons with plus/minus toggle indicators for maximum visual clarity and affordance
Voluptate deripio vulnus coniecto cena vulgivagus. Illum tergiversatio vomito excepturi suspendo calculus. Tum vitae autem vilitas cupiditas deprimo suggero doloribus usitas adulescens.
Inventore spectaculum curatio speciosus tero thorax conturbo auctor utrimque. Theatrum textus peior volo ventito abeo. Bibo eos eveniet.
Bene abstergo acsi cena super amet. Defungo timor sui articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.
Corrigo barba ademptio administratio nulla. Corrigo dolore uter callide cresco. Una crastinus et impedit.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion py-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<h5 class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
<path d="M7 16H12" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg>Persevering dedicated capacity</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 72px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Voluptate deripio vulnus coniecto cena
vulgivagus. Illum tergiversatio vomito excepturi suspendo calculus. Tum vitae autem vilitas
cupiditas deprimo suggero doloribus usitas adulescens.</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<h5 class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>Seamless reciprocal software</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8'>Inventore spectaculum curatio speciosus tero
thorax conturbo auctor utrimque. Theatrum textus peior volo ventito abeo. Bibo eos eveniet.
</p>
</div>
</div>
<div class='accordion py-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5 class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="currentColor" stroke-width="null" stroke-miterlimit="10"
stroke-linecap="round" class="my-path"></path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>Profound interactive instruction set</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8'>Bene abstergo acsi cena super amet. Defungo
timor sui
articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.</p>
</div>
</div>
<div class='accordion py-4 px-4'
id='basic-heading-three-with-arrow-always-open'>
<button
class='accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<h5 class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22.9983 19.3008C22.9983 15.6557 20.0433 12.7007 16.3982 12.7007M16.3982 12.7007C12.753 12.7007 9.79803 15.6557 9.79803 19.3008M16.3982 12.7007C14.2718 12.7007 12.5481 10.9764 12.5481 8.85007C12.5481 6.72374 14.2719 5 16.3982 5C18.5245 5 20.2483 6.72374 20.2483 8.85007C20.2483 10.9764 18.5245 12.7007 16.3982 12.7007ZM1 18.2008C1 15.1632 3.46248 12.7007 6.50011 12.7007C8.0387 12.7007 9.42974 13.3324 10.428 14.3507M3.74818 9.87261C3.74818 11.3914 4.97942 12.6227 6.49823 12.6227C8.01704 12.6227 9.24828 11.3914 9.24828 9.87261C9.24828 8.3538 8.01704 7.12256 6.49823 7.12256C4.97942 7.12256 3.74818 8.3538 3.74818 9.87261Z"
stroke="currentColor" stroke-width="null" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>Grass-roots local local area network</h5>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8'>Corrigo barba ademptio administratio nulla.
Corrigo dolore uter callide cresco. Una crastinus et impedit.</p>
</div>
</div>
</div>
</div>Standard Accordion - Full Featured Example
A comprehensive accordion combining icons, subtitles, and plus/minus indicators for maximum information density and visual hierarchy
Voluptate deripio vulnus coniecto cena vulgivagus. Illum tergiversatio vomito excepturi suspendo calculus. Tum vitae autem vilitas cupiditas deprimo suggero doloribus usitas adulescens.
Inventore spectaculum curatio speciosus tero thorax conturbo auctor utrimque. Theatrum textus peior volo ventito abeo. Bibo eos eveniet.
Bene abstergo acsi cena super amet. Defungo timor sui articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.
Corrigo barba ademptio administratio nulla. Corrigo dolore uter callide cresco. Una crastinus et impedit.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
<path d="M7 16H12" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Persevering dedicated capacity</h5>
<span class="text-sm">integrate rich metrics</span>
</div>
</div>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 120px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6 pl-8 pb-4'>Voluptate deripio vulnus coniecto cena
vulgivagus. Illum tergiversatio vomito excepturi suspendo calculus. Tum vitae autem vilitas
cupiditas deprimo suggero doloribus usitas adulescens.</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Universal bottom-line throughput</h5>
<span class="text-sm">deploy robust web services</span>
</div>
</div>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Inventore spectaculum curatio speciosus
tero
thorax conturbo auctor utrimque. Theatrum textus peior volo ventito abeo. Bibo eos eveniet.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="currentColor" stroke-width="null" stroke-miterlimit="10"
stroke-linecap="round" class="my-path"></path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Triple-buffered human-resource interface</h5>
<span class="text-sm">incubate next-generation platforms</span>
</div>
</div>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Bene abstergo acsi cena super amet. Defungo
timor sui
articulus aequus. Carmen solutio subvenio ventosus angelus vito creta.</p>
</div>
</div>
<div class='accordion pt-4 px-4' id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-600 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22.9983 19.3008C22.9983 15.6557 20.0433 12.7007 16.3982 12.7007M16.3982 12.7007C12.753 12.7007 9.79803 15.6557 9.79803 19.3008M16.3982 12.7007C14.2718 12.7007 12.5481 10.9764 12.5481 8.85007C12.5481 6.72374 14.2719 5 16.3982 5C18.5245 5 20.2483 6.72374 20.2483 8.85007C20.2483 10.9764 18.5245 12.7007 16.3982 12.7007ZM1 18.2008C1 15.1632 3.46248 12.7007 6.50011 12.7007C8.0387 12.7007 9.42974 13.3324 10.428 14.3507M3.74818 9.87261C3.74818 11.3914 4.97942 12.6227 6.49823 12.6227C8.01704 12.6227 9.24828 11.3914 9.24828 9.87261C9.24828 8.3538 8.01704 7.12256 6.49823 7.12256C4.97942 7.12256 3.74818 8.3538 3.74818 9.87261Z"
stroke="currentColor" stroke-width="null" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Smart AI-powered parallelism</h5>
<span class="text-sm">iterate collaborative lifetime value</span>
</div>
</div>
<svg class='w-6 h-6 text-gray-600 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-600 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Corrigo barba ademptio administratio nulla.
Corrigo dolore uter callide cresco. Una crastinus et impedit.</p>
</div>
</div>
</div>
</div>Accordion Subtitle Example
An accordion with subtitle text beneath each title, providing additional context or preview information for collapsible sections/p>
Cervus vulgo aptus civis degusto sui vomica. Acsi curiositas tergo volutabrum. Trepide cohaero provident sperno contego depereo patior.
Truculenter sono clam. Perferendis currus animi aegrus. Uredo tendo utor denuncio acervus quos adsuesco utroque.
Sunt vita cicuta theca deprecator certus ars. Adeo auctus vos denique facere spiculum. Thesaurus causa aeternus ceno ars exercitationem.
Tumultus thermae usque quod aperte. Bellum volo balbus. Canis crinis collum ater stultus desparatus consuasor quo correptius valetudo.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Upgradable fault-tolerant utilisation</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">simplify visionary functionalities</span>
</div>
<svg
class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active'
style="max-height: 120px;" aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6 pb-4'>Cervus vulgo aptus civis degusto sui
vomica.
Acsi curiositas tergo volutabrum. Trepide cohaero provident sperno contego depereo
patior.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Reactive resilient throughput</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">transform best-of-breed large language models</span>
</div>
<svg
class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Truculenter sono clam. Perferendis currus
animi
aegrus. Uredo tendo utor denuncio acervus quos adsuesco utroque.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>User-friendly coherent open architecture</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">exploit user-centric web services</span>
</div>
<svg
class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Sunt vita cicuta theca deprecator certus
ars.
Adeo auctus vos denique facere spiculum. Thesaurus causa aeternus ceno ars
exercitationem.
</p>
</div>
</div>
<div class='accordion pt-4 px-4' id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Adaptive cloud-native benchmark</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">harness sustainable solutions</span>
</div>
<svg
class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Tumultus thermae usque quod aperte. Bellum
volo
balbus. Canis crinis collum ater stultus desparatus consuasor quo correptius valetudo.
</p>
</div>
</div>
</div>
</div>Subtitle Accordion with Plus Trigger Example
An accordion with subtitle text and plus/minus toggle indicators, combining contextual information with bold affordance
Vulgivagus strues molestias. Agnitio consuasor terror beneficium sustineo aeternus contra. Distinctio unus rerum suscipio a acies suscipit odit debitis vorax.
Sit solio uxor volup caries ullus accusator undique. Utor sperno theologus claustrum capitulus correptius alii spargo depulso demens. Deduco utpote valens crux triduana circumvenio cedo eaque.
Neque surculus deleniti cometes subnecto denique. Antiquus cohibeo suppono vero adhuc decretum volaticus. Dapifer cognatus videlicet cenaculum audeo non.
Cado solio autem spero statua spoliatio. Maxime uredo creta in calamitas ipsam suppono. Cubitum spiritus deserunt unde color depromo via.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Polarised context-sensitive interface</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">optimize granular networks</span>
</div>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 120px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6 pb-4'>Vulgivagus strues molestias. Agnitio consuasor
terror beneficium sustineo aeternus contra. Distinctio unus rerum suscipio a acies suscipit
odit debitis vorax.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Stand-alone full-range contingency</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">integrate AI-driven systems</span>
</div>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Sit solio uxor volup caries ullus accusator
undique. Utor sperno theologus claustrum capitulus correptius alii spargo depulso demens.
Deduco utpote valens crux triduana circumvenio cedo eaque.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Enhanced value-added orchestration</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">seize killer systems</span>
</div>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Neque surculus deleniti cometes subnecto
denique. Antiquus cohibeo suppono vero adhuc decretum volaticus. Dapifer cognatus videlicet
cenaculum audeo non.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex flex-col items-start">
<h5>Universal intermediate emulation</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">seize customized markets</span>
</div>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pb-4'>Cado solio autem spero statua spoliatio. Maxime
uredo creta in calamitas ipsam suppono. Cubitum spiritus deserunt unde color depromo via.
</p>
</div>
</div>
</div>
</div>Subtitle Accordion with Full Featured Example
An accordion combining category icons, subtitle text, and standard chevron indicators for complete information hierarchy with subtle affordance
Tego thesis vespillo sto laudantium decimus. Repellat sum cometes super nihil perspiciatis approbo territo contra sufficio. Vulticulus aestus adipisci dens ustulo tametsi canis cultellus sustineo.
Adaugeo sint ascit thesis corona conqueror adfero. Error taedium suscipio ut antea tum facilis tres accommodo temperantia. Sunt terror ceno cohors sonitus totus earum.
Tempus sint vacuus modi decretum infit minima accendo soluta. Territo triduana comes tutis. Repudiandae tracto totidem velut amicitia.
Stipes accedo voluptates carus compono summa animadverto bos desolo. Saepe una aveho sapiente tolero vilicus tergiversatio catena patior utpote. Arca caries cohaero caterva.
<div class="w-full max-w-md mx-auto bg-white rounded-lg border overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200 active'
id='basic-heading-one-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 always-open '
aria-controls='basic-collapse-one-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
<path d="M7 16H12" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>AI-driven cloud-native process improvement</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">embrace immersive solutions</span>
</div>
</div>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4 active' style="max-height: 120px;"
aria-labelledby='basic-heading-one-with-arrow-always-open'>
<p class='text-sm text-gray-600 leading-6 pl-8 pb-4'>Tego thesis vespillo sto laudantium
decimus. Repellat sum cometes super nihil perspiciatis approbo territo contra sufficio.
Vulticulus aestus adipisci dens ustulo tametsi canis cultellus sustineo.</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-two-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-two-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Virtual neutral monitoring</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">productize granular schemas</span>
</div>
</div>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-two-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-two-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Adaugeo sint ascit thesis corona conqueror
adfero. Error taedium suscipio ut antea tum facilis tres accommodo temperantia. Sunt terror
ceno cohors sonitus totus earum.
</p>
</div>
</div>
<div class='accordion pt-4 px-4 border-b border-solid border-gray-200'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="currentColor" stroke-width="null" stroke-miterlimit="10"
stroke-linecap="round" class="my-path"></path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Adaptive reciprocal circuit</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">empower impactful convergence</span>
</div>
</div>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Tempus sint vacuus modi decretum infit
minima accendo soluta. Territo triduana comes tutis. Repudiandae tracto totidem velut
amicitia.</p>
</div>
</div>
<div class='accordion pt-4 px-4'
id='basic-heading-three-with-arrow-always-open'>
<button
class='pb-4 accordion-toggle group inline-flex items-center justify-between leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600'
aria-controls='basic-collapse-three-with-arrow-always-open'>
<div class="flex items-center gap-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22.9983 19.3008C22.9983 15.6557 20.0433 12.7007 16.3982 12.7007M16.3982 12.7007C12.753 12.7007 9.79803 15.6557 9.79803 19.3008M16.3982 12.7007C14.2718 12.7007 12.5481 10.9764 12.5481 8.85007C12.5481 6.72374 14.2719 5 16.3982 5C18.5245 5 20.2483 6.72374 20.2483 8.85007C20.2483 10.9764 18.5245 12.7007 16.3982 12.7007ZM1 18.2008C1 15.1632 3.46248 12.7007 6.50011 12.7007C8.0387 12.7007 9.42974 13.3324 10.428 14.3507M3.74818 9.87261C3.74818 11.3914 4.97942 12.6227 6.49823 12.6227C8.01704 12.6227 9.24828 11.3914 9.24828 9.87261C9.24828 8.3538 8.01704 7.12256 6.49823 7.12256C4.97942 7.12256 3.74818 8.3538 3.74818 9.87261Z"
stroke="currentColor" stroke-width="null" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
<div class="flex flex-col items-start">
<h5>Upgradable empowering model</h5>
<span class="text-sm text-gray-600 accordion-active:text-indigo-600">target interactive functionalities</span>
</div>
</div>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-arrow-always-open'
class='accordion-content w-full px-0 overflow-hidden pr-4'
aria-labelledby='basic-heading-three-with-arrow-always-open'>
<p class='text-sm text-gray-500 leading-6 pl-8 pb-4'>Stipes accedo voluptates carus compono
summa animadverto bos desolo. Saepe una aveho sapiente tolero vilicus tergiversatio catena
patior utpote. Arca caries cohaero caterva.</p>
</div>
</div>
</div>
</div>Tabs Accordion Example
A tab-style accordion with separated card-like sections and default chevron indicators for clean expandable content organization
Arcesso absorbeo paulatim atavus solus dolorem excepturi debeo vinum assumenda. Vigor adflicto veniam thesis perspiciatis atavus tricesimus cenaculum. Canto debilito tyrannus sed compello dicta modi caritas vestigium.
Tot expedita astrum. Supplanto dens baiulus aspernatur solum dolorum vorago soluta deficio. Coepi appello illum.
Absque tollo titulus itaque super aggredior vulgus alo arceo corpus. Vergo cimentarius officiis vilitas dolorem caelestis vigilo apud suus. Defleo ullus certe agnitio conscendo.
Astrum autem vehemens suus careo nostrum surculus. Verumtamen caritas cena eveniet deporto vergo deorsum tamen ascit. Autus aperio crur unde aggredior atqui.
<div class="w-full max-w-md mx-auto overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl transition duration-500 mb-2 lg:p-4'
id='basic-heading-one-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-one-with-icon'>
<h5>Secured transitional framework </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-one-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-one'>
<p class='text-sm text-gray-600 leading-6'>Arcesso absorbeo paulatim atavus solus dolorem
excepturi debeo vinum assumenda. Vigor adflicto veniam thesis perspiciatis atavus tricesimus
cenaculum. Canto debilito tyrannus sed compello dicta modi caritas vestigium.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-two-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-two-with-icon'>
<h5>Polarised coherent hub </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-two-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-two'>
<p class='text-sm text-gray-600 leading-6'>Tot expedita astrum. Supplanto dens baiulus
aspernatur solum dolorum vorago soluta deficio. Coepi appello illum.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<h5>Customizable modular monitoring </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6'>Absque tollo titulus itaque super aggredior
vulgus alo arceo corpus. Vergo cimentarius officiis vilitas dolorem caelestis vigilo apud
suus. Defleo ullus certe agnitio conscendo.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<h5>Immersive optimizing parallelism </h5>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6'>Astrum autem vehemens suus careo nostrum
surculus. Verumtamen caritas cena eveniet deporto vergo deorsum tamen ascit. Autus aperio
crur unde aggredior atqui.</p>
</div>
</div>
</div>
</div>Tabs Accordion with Left Chevron Example
A tab-style accordion with left-aligned chevron indicators using flex-row-reverse for action-first card navigation
Vorax terreo vinculum consuasor thermae auctus torqueo. Aro porro constans canis cotidie demens comitatus. Sursum conculco urbs crur vel quas demo pauci.
Apud vespillo vereor natus curriculum velit aduro animi carus depono. Nemo vesica avaritia theologus curriculum iste depono contego curo crebro. Cogito volo demo terga centum argentum cumque cinis ait.
Tondeo fugiat somniculosus atque curtus magnam. Error tempora ventosus doloribus testimonium reprehenderit. Usus quidem verecundia clamo.
Supplanto confero bellicus. Talus absens vindico adhaero decens sub angulus umquam. Peccatus desipio tenuis nobis crux adeptio.
<div class="w-full max-w-md mx-auto overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl transition duration-500 mb-2 lg:p-4'
id='basic-heading-one-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-one-with-icon'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5>Persistent asymmetric knowledge base</h5>
</button>
<div id='basic-collapse-one-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-one'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Vorax terreo vinculum consuasor thermae auctus
torqueo. Aro porro constans canis cotidie demens comitatus. Sursum conculco urbs crur vel
quas demo pauci.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-two-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-two-with-icon'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5>Sustainable immersive orchestration</h5>
</button>
<div id='basic-collapse-two-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-two'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Apud vespillo vereor natus curriculum velit
aduro animi carus depono. Nemo vesica avaritia theologus curriculum iste depono contego curo
crebro. Cogito volo demo terga centum argentum cumque cinis ait.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5>Quality-focused interactive internet solution </h5>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Tondeo fugiat somniculosus atque curtus
magnam. Error tempora ventosus doloribus testimonium reprehenderit. Usus quidem verecundia
clamo.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<svg class='text-gray-900 transition duration-500 group-hover:text-indigo-600 accordion-active:text-indigo-600 accordion-active:rotate-180'
width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M16.5 8.25L12.4142 12.3358C11.7475 13.0025 11.4142 13.3358 11 13.3358C10.5858 13.3358 10.2525 13.0025 9.58579 12.3358L5.5 8.25'
stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>
</path>
</svg>
<h5>Ergonomic mobile monitoring</h5>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Supplanto confero bellicus. Talus absens
vindico adhaero decens sub angulus umquam. Peccatus desipio tenuis nobis crux adeptio.</p>
</div>
</div>
</div>
</div>Tabs Accordion with Plus Trigger Example
A tab-style accordion with right-aligned plus/minus indicators and card-like separation for bold, expandable sections
Deleniti numquam tendo urbs. Est cognatus curia crinis auxilium spiculum decet utroque attollo. Studio quidem aeneus vox cupio curia ait cimentarius.
Benevolentia cupio demo numquam thymum ulciscor denuncio usus ventosus adsum. Similique demulceo illum valde vomica vado. Theca clibanus talio curso vulgivagus sint.
Dapifer valetudo velociter absorbeo vulticulus umbra dolorem ars aduro absque. Terminatio vulgaris depulso arma trans degenero. Aspernatur astrum rem velociter adnuo perferendis.
Addo cultura alii consequuntur umbra. Summa utrum pecus sortitus suggero. Solio nihil appono quos iste neque sursum cedo aperte cenaculum.
<div class="w-full max-w-md mx-auto overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl transition duration-500 mb-2 lg:p-4'
id='basic-heading-one-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-one-with-icon'>
<h5>Visionary next generation synergy </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-one-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-one'>
<p class='text-sm text-gray-600 leading-6'>Deleniti numquam tendo urbs. Est cognatus curia
crinis auxilium spiculum decet utroque attollo. Studio quidem aeneus vox cupio curia ait
cimentarius.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-two-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-two-with-icon'>
<h5>Distributed local alliance </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-two-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-two'>
<p class='text-sm text-gray-600 leading-6'>Benevolentia cupio demo numquam thymum ulciscor
denuncio usus ventosus adsum. Similique demulceo illum valde vomica vado. Theca clibanus
talio curso vulgivagus sint.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<h5>Sustainable zero trust website </h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6'>Dapifer valetudo velociter absorbeo vulticulus
umbra dolorem ars aduro absque. Terminatio vulgaris depulso arma trans degenero. Aspernatur
astrum rem velociter adnuo perferendis.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center justify-between text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<h5>Persevering user-facing moderator</h5>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6'>Addo cultura alii consequuntur umbra. Summa utrum
pecus sortitus suggero. Solio nihil appono quos iste neque sursum cedo aperte cenaculum.</p>
</div>
</div>
</div>
</div>Tabs Accordion with Left Plus Trigger Example
A tab-style accordion with left-aligned plus/minus indicators and visual separation between items for card-like expandable sections
Arcesso absorbeo paulatim atavus solus dolorem excepturi debeo vinum assumenda. Vigor adflicto veniam thesis perspiciatis atavus tricesimus cenaculum. Canto debilito tyrannus sed compello dicta modi caritas vestigium.
Tot expedita astrum. Supplanto dens baiulus aspernatur solum dolorum vorago soluta deficio. Coepi appello illum.
Absque tollo titulus itaque super aggredior vulgus alo arceo corpus. Vergo cimentarius officiis vilitas dolorem caelestis vigilo apud suus. Defleo ullus certe agnitio conscendo.
Astrum autem vehemens suus careo nostrum surculus. Verumtamen caritas cena eveniet deporto vergo deorsum tamen ascit. Autus aperio crur unde aggredior atqui.
<div class="w-full max-w-md mx-auto overflow-hidden">
<div class='accordion-group' data-accordion="default-accordion">
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl transition duration-500 mb-2 lg:p-4'
id='basic-heading-one-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-one-with-icon'>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600 origin-center'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Secured transitional framework </h5>
</button>
<div id='basic-collapse-one-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-one'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Arcesso absorbeo paulatim atavus solus dolorem
excepturi debeo vinum assumenda. Vigor adflicto veniam thesis perspiciatis atavus tricesimus
cenaculum. Canto debilito tyrannus sed compello dicta modi caritas vestigium.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-two-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-two-with-icon'>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Polarised coherent hub </h5>
</button>
<div id='basic-collapse-two-with-icon' class='accordion-content w-full overflow-hidden pr-4'
aria-labelledby='basic-heading-two'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Tot expedita astrum. Supplanto dens baiulus
aspernatur solum dolorum vorago soluta deficio. Coepi appello illum.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Customizable modular monitoring </h5>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Absque tollo titulus itaque super aggredior
vulgus alo arceo corpus. Vergo cimentarius officiis vilitas dolorem caelestis vigilo apud
suus. Defleo ullus certe agnitio conscendo.</p>
</div>
</div>
<div class='accordion bg-white border border-solid border-gray-300 p-4 rounded-xl mb-2 lg:p-4'
id='basic-heading-three-with-icon'>
<button
class='accordion-toggle group inline-flex items-center gap-3 text-left text-base leading-8 text-gray-900 w-full transition duration-500 hover:text-indigo-600 accordion-active:text-indigo-600 '
aria-controls='basic-collapse-three-with-icon'>
<svg class='w-6 h-6 text-gray-900 transition duration-500 block accordion-active:text-indigo-600 accordion-active:hidden group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18M12 18V6' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<svg class='w-6 h-6 text-gray-900 transition duration-500 hidden accordion-active:text-indigo-600 accordion-active:block group-hover:text-indigo-600'
viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 12H18' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'
stroke-linejoin='round'></path>
</svg>
<h5>Immersive optimizing parallelism </h5>
</button>
<div id='basic-collapse-three-with-icon' class='accordion-content w-full overflow-hidden pr-4 '
aria-labelledby='basic-heading-three'>
<p class='text-sm text-gray-600 leading-6 pl-8'>Astrum autem vehemens suus careo nostrum
surculus. Verumtamen caritas cena eveniet deporto vergo deorsum tamen ascit. Autus aperio
crur unde aggredior atqui.</p>
</div>
</div>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More