Dropdown
Default
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Actions <i class="mgc_down_line text-base ms-1"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
Dropdown Color Variant
<div>
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex bg-primary text-white justify-center items-center text-sm gap-2 rounded-md font-medium shadow-sm align-middle transition-all">
Primary <i class="mgc_down_line text-base"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex bg-secondary text-white justify-center items-center text-sm gap-2 rounded-md font-medium shadow-sm align-middle transition-all">
Secondary <i class="mgc_down_line text-lg"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex bg-success text-white justify-center items-center text-sm gap-2 rounded-md font-medium shadow-sm align-middle transition-all">
Success <i class="mgc_down_line text-lg"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex bg-warning text-white justify-center items-center text-sm gap-2 rounded-md font-medium shadow-sm align-middle transition-all">
Warning <i class="mgc_down_line text-lg"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button" class="py-2 px-3 inline-flex bg-danger text-white justify-center items-center text-sm gap-2 rounded-md font-medium shadow-sm align-middle transition-all">
Danger <i class="mgc_down_line text-lg"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
</div>
Hover event
<button data-fc-type="dropdown" type="button" data-fc-offset="0" data-fc-trigger="hover" class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Hover Actions <i class="mgc_down_line text-lg"></i>
</button>
<div class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
Something else here
</a>
</div>
Dividers
<button data-fc-type="dropdown" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Actions <i class="mgc_down_line text-lg"></i>
</button>
<div
class="hidden fc-dropdown-open:opacity-100 opacity-0 z-50 transition-all duration-300 bg-white border shadow-md rounded-lg p-2 dark:bg-slate-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
<div class="h-px bg-black/10 dark:bg-gray-700 my-2 -mx-2"></div>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Separated link
</a>
</div>
Nested Dropdown
<div>
<button data-fc-type="dropdown" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-lg border font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Three Level Dropdown <i class="mgc_down_line text-lg"></i>
</button>
<div id="dropdown-target"
class="hidden bg-white shadow rounded-lg border p-2 px-2 dark:bg-gray-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Another Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Something else here
</a>
<div>
<a class="flex items-center justify-between py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 cursor-pointer"
data-fc-offset="8" data-fc-placement="right-start"
data-fc-trigger="hover" data-fc-type="dropdown" type="button">
Actions
<span
class="ms-2 material-symbols-rounded -rotate-90 text-lg/none">expand_more</span>
</a>
<div
class="-ms-2 hidden w-48 bg-white shadow-md rounded-lg border p-2 px-2 dark:bg-gray-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Something else here
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Separated link
</a>
</div>
</div>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Three level Dropdown <i class="mgc_down_line text-lg"></i>
</button>
<div id="dropdown-target"
class="hidden bg-white shadow rounded-lg border p-2 px-2 dark:bg-gray-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Another Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Something else here
</a>
<div>
<a class="flex items-center justify-between py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 cursor-pointer"
data-fc-offset="8" data-fc-placement="right-start"
data-fc-trigger="hover" data-fc-type="dropdown" type="button">
Actions
<span
class="ms-2 material-symbols-rounded -rotate-90 text-lg/none">expand_more</span>
</a>
<div
class="-ms-2 hidden w-48 bg-white shadow-md rounded-lg border p-2 px-2 dark:bg-gray-800 dark:border-slate-700">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Something else here
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="javascript:void(0)">
Separated link
</a>
</div>
</div>
</div>
</div>
Alignment options
<div>
<button data-fc-type="dropdown" data-fc-placement="right-start" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Dropdown Right <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="left-start" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Dropdown left <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="top" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Dropdown Top <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="bottom" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Dropdown Bottom <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="top-start" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Top Start <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="top-end" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Top End <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Another action
</a>
<a class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
href="#">
Something else here
</a>
</div>
</div>
Dropdown With Form Components
<div>
<button data-fc-type="dropdown" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Radio <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-44 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<div
class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
<div class="flex">
<input type="radio" name="default-radio"
class="shrink-0 form-checkbox rounded"
id="default-radio">
<label for="default-radio"
class="text-sm text-gray-500 ms-2 dark:text-gray-400">Default
radio</label>
</div>
</div>
<div
class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
<div class="flex">
<input type="radio" name="default-radio"
class="shrink-0 form-checkbox rounded"
id="checked-radio" checked>
<label for="checked-radio"
class="text-sm text-gray-500 ms-2 dark:text-gray-400">Checked
radio</label>
</div>
</div>
</div>
</div>
<div>
<button data-fc-type="dropdown" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
CheckBox <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-52 min-w-[120px] p-2 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<div
class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
<div class="flex">
<input type="checkbox"
class="shrink-0 form-checkbox rounded"
id="default-checkbox">
<label for="default-checkbox"
class="text-sm text-gray-500 ms-3 dark:text-gray-400">Default
checkbox</label>
</div>
</div>
<div
class="flex items-center py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
<div class="flex">
<input type="checkbox"
class="shrink-0 form-checkbox rounded"
id="checked-checkbox" checked>
<label for="checked-checkbox"
class="text-sm text-gray-500 ms-3 dark:text-gray-400">Checked
checkbox</label>
</div>
</div>
</div>
</div>
<div>
<button data-fc-type="dropdown" data-fc-placement="top" type="button"
class="py-2 px-3 inline-flex justify-center items-center rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 transition-all text-sm dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
Form <i class="mgc_down_line text-lg"></i>
</button>
<div
class="fc-dropdown-open:opacity-100 hidden opacity-0 w-72 p-4 shadow-md rounded-lg z-50 transition-[margin,opacity] duration-300 bg-white dark:bg-gray-800">
<form>
<div class="mb-3">
<label for="exampleInputEmail1"
class="text-gray-800 text-sm font-medium inline-block mb-2">Email
address</label>
<input type="email" class="form-input" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp"
class="form-text text-sm text-slate-700 dark:text-slate-400">We'll
never share your email
with anyone else.</small>
</div>
<div class="mb-3">
<label for="exampleInputPassword1"
class="text-gray-800 text-sm font-medium inline-block mb-2">Password</label>
<input type="password" class="form-input" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="flex items-center gap-2 mb-3">
<input type="checkbox"
class="form-checkbox rounded border border-gray-200"
id="checkmeout0">
<label class="text-gray-800 text-sm font-medium inline-block"
for="checkmeout0">Check me out !</label>
</div>
<button type="submit" class="btn bg-primary text-white">Submit</button>
</form>
</div>
</div>