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