⌘K
Recent searches
No recent searches yet.
Suggestions
Esc
Navigation
Executive DashboardActions
Register new patientRecords
Patients directorySettings
Open settings↑↓navigateEnterselectDreams AI Command
No recent searches yet.
Dreams AI
Hospital operations copilot
Ask anything or pick a smart shortcut below.
System follows your device preference automatically.
Notification Center
Live across all departments
Angela Merkel
Shift
Day · 8–5
Dept
Cardiology
Navigation
Executive DashboardActions
Register new patientRecords
Patients directorySettings
Open settingsCollapsible content panels for organizing and navigating information.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-1">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-1" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-2">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-2" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-3">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-3" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-4">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon-chevron-up"></i>
</span>
</button>
<div id="acc-4" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-5">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon-chevron-up"></i>
</span>
</button>
<div id="acc-5" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-6">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon-chevron-up"></i>
</span>
</button>
<div id="acc-6" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-7">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-7" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-8">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-8" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-9">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-9" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-10">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-minus"></i></span>
</button>
<div id="acc-10" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-11">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-circle-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-circle-minus"></i></span>
</button>
<div id="acc-11" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-12">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-square-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-square-minus"></i></span>
</button>
<div id="acc-12" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-13" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon-chevron-up"></i>
</span>
</button>
<div id="acc-13" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-14">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-14" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-15">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-15" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-16">
Accordion #1
</button>
<div id="acc-16" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-17">
Accordion #2
</button>
<div id="acc-17" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-18">
Accordion #3
</button>
<div id="acc-18" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-55">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-55" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-56">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-56" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-57">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-57" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-58">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-58" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-59">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-59" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-60">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-60" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-19">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-19" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-20">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-20" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-21">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-21" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-22">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i>
</span>
</button>
<div id="acc-22" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-23">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-23" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-24">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-24" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-25">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-25" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-26">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-26" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-27">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-27" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-28">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-28" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-29">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-29" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-30">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-30" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-31">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-31" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none"aria-expanded="false"aria-controls="acc-32">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-32" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-33">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-33" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-34">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-34" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-35">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-35" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:dark:text-dark-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-36">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-36" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-primary rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-37" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-37" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-primary rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-38">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-38" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-primary rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-39">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-39" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-success rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-40">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-40" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-success rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-41">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-41" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-success rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-42" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-42" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-warning rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-43" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-43" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-warning rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-44" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-44" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-warning rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-45" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-45" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-danger rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-46" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-46" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-danger rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-47" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-47" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-danger rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-48" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-48" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-dark rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-49" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-49" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-dark rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-50" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-50" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-dark rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-51" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-51" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-info rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-52" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-52" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-info rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-53" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-53" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-info rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-54" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon-chevron-up"></i></span>
</button>
<div id="acc-54" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div>
</div>