Dropdowns

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