- DashboardS & Apps
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-primary text-white text-sm rounded hover:bg-primary-600 border border-primary-500 mb-2">Primary <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-1" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-red text-white text-sm rounded hover:bg-red-600 border border-red-500 mb-2">Red <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-2" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-green text-white text-sm rounded hover:bg-green-600 border border-green-500 mb-2">Green <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-3" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-primary text-white text-sm rounded-full hover:bg-primary-600 border border-primary-500 mb-2">Primary <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-4" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-red text-white text-sm rounded-full hover:bg-red-600 border border-red-500 mb-2">Red <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-5" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-green text-white text-sm rounded-full hover:bg-green-600 border border-green-500 mb-2">Green <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-6" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-primary text-sm rounded transition hover:bg-primary-500 hover:text-white border border-primary font-medium mb-2">Primary <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-7" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium mb-2 focus:outline-none rounded transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-8" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-yellow text-sm rounded transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium mb-2">Yellow <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-9" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-primary text-sm rounded-full transition hover:bg-primary-500 hover:text-white border border-primary font-medium mb-2">Primary <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-10" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-gray-900 text-sm font-medium mb-2 focus:outline-none rounded-full transition border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-11" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 bg-transparent text-yellow text-sm rounded-full transition hover:bg-yellow-600 hover:text-white border border-yellow font-medium mb-2">Yellow <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-12" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-green-500 via-green-600 to-green-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-green-600 border border-green font-medium mb-2">Green <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-13" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 text-gray-900 bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-yellow-600 border border-yellow font-medium mb-2">Yellow <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-14" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 lg:px-4 text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br text-sm rounded transition hover:bg-pink-600 border border-pink font-medium mb-2">Pink <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-15" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none ">
<span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Purple to blue <i class="fas fa-chevron-down ms-1 text-xs self-center"></i>
</span>
</button>
<div id="dropdown-target-16" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none">
<span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Cyan to blue <i class="fas fa-chevron-down ms-1 text-xs self-center"></i>
</span>
</button>
<div id="dropdown-target-17" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:outline-none">
<span class="relative px-2 py-1 lg:px-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
Green to blue <i class="fas fa-chevron-down ms-1 text-xs self-center"></i>
</span>
</button>
<div id="dropdown-target-18" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 mb-2 text-xs font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra small <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-19" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-2 py-1 mb-2 text-sm font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Small <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-20" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="text-white mb-2 bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-sm px-3 py-2 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Base <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-21" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="px-3 py-2 mb-2 text-base font-medium text-center text-white bg-primary-500 rounded hover:bg-primary-600 focus:outline-none dark:bg-primary-500 dark:hover:bg-primary-600 ">Large <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-22" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
<button type="button" data-fc-autoclose="both" data-fc-type="dropdown" class="text-white mb-2 bg-primary-500 hover:bg-primary-600 focus:outline-none font-medium rounded text-base px-5 py-3 text-center dark:bg-primary-500 dark:hover:bg-primary-600 ">Extra large <i class="fas fa-chevron-down ms-1 text-xs self-center"></i></button>
<div id="dropdown-target-23" class=" hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-800 border border-slate-700/10">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-600 dark:text-gray-300 hover:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/40 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>