Basic Dropdown
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropdown-1">
Dropdown button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-1">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
Dropdown Divider
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropdown-2">
Dropdown button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-2">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another link</a>
</div>
</div>
</div>
Dropdown Header
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropdown-3">
Dropdown button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-3">
<h5 class="dropdown-header py-2 px-4 text-body-color text-[13px] font-medium text-left block w-full whitespace-nowrap">Dropdown header</h5>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
<h5 class="dropdown-header py-2 px-4 text-body-color text-[13px] font-medium text-left block w-full whitespace-nowrap">Dropdown header</h5>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another link</a>
</div>
</div>
</div>
Disable and Active items
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropdown-4">
Dropdown button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-4">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Normal</a>
<a class="dropdown-item py-2 px-5 text-primary text-[13px] text-left block w-full whitespace-nowrap bg-primary-light active" href="javascript:void(0);">Active</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C] disabled" href="javascript:void(0);">Disabled</a>
</div>
</div>
</div>
Align Right
<div class="basic-dropdown">
<div class="dropdown">
<button type="button" class="dz-dropdown relative dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropdown-5">
Dropdown button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] translate-x-[2.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-5">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
Dropup
<div class="basic-dropdown">
<!-- Default dropup button -->
<div class="btn-group inline-flex dropup mb-1">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropup-1">
Dropup
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] lg:translate-y-[-1.2rem] md:translate-y-[-25px] translate-y-[25px] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden top-0" id="dropup-1">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group inline-flex dropup mb-1">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md">
Split dropup
</button>
<button type="button" class="dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" data-dz-dropdown="dropup-2">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] lg:translate-y-[-15px] md:translate-y-[-25px] translate-y-[25px] md:translate-x-[140px] translate-x-[40px] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden top-0" id="dropup-2">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
Dropright
<div class="basic-dropdown">
<!-- Default dropright button -->
<div class="btn-group inline-flex dropend mb-1">
<button type="button" class="dz-dropdown dropdown-toggle py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropright-1">
Dropright
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-x-[137px] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropright-1">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group inline-flex dropend mb-1">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md">
Split dropright
</button>
<button type="button" class="dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md" data-dz-dropdown="dropright-2">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] md:translate-x-[187px] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropright-2">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
</div>
dropstart
<div class="basic-dropdown">
<!-- Default dropstart button -->
<div class="btn-group inline-flex dropstart mb-1">
<button type="button" class="dz-dropdown dropdown-toggle after:hidden py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-md" data-dz-dropdown="dropstart-1">
dropstart
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] lg:translate-x-[-166px] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropstart-1">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
<!-- Split dropstart button -->
<div class="btn-group inline-flex mb-1">
<div class="btn-group inline-flex dropstart " role="group">
<button type="button" class="dz-dropdown dropdown-toggle after:hidden dropdown-toggle-split px-2.5 opacity-80 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-s-md" data-dz-dropdown="dropstart-2">
<span class="sr-only">Toggle dropstart</span>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] lg:translate-x-[-163px] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropstart-2">
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 1</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 2</a>
<a class=dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Link 3</a>
</div>
</div>
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary focus:bg-hover-primary hover:border-hover-primary rounded-e-md">
Split dropstart
</button>
</div>
</div>
Button Dropdowns
<div class="button-dropdown">
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-s-md">Primary</button>
<button type="button" class="dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-primary text-white bg-primary text-[15px] max-xl:text-[13px] duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-e-md" data-dz-dropdown="dropdown-6">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] translate-x-[7.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-6">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-secondary text-white bg-secondary text-[15px] max-xl:text-[13px] duration-500 hover:bg-black focus:bg-black hover:border-black rounded-s-md btn-secondary">Secondary</button>
<button type="button" class="btn-secondary dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-secondary text-white bg-secondary text-[15px] max-xl:text-[13px] duration-500 hover:bg-secondary-hover focus:bg-secondary-hover hover:border-secondary-hover rounded-e-md" data-dz-dropdown="dropdown-7">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] lg:translate-x-[7.25rem] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-7">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-success text-white bg-success text-[15px] max-xl:text-[13px] duration-500 hover:bg-success-hover focus:bg-success-hover hover:border-success-hover rounded-s-md btn-success">Success</button>
<button type="button" class="btn-success dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-success text-white bg-success text-[15px] max-xl:text-[13px] duration-500 hover:bg-success-hover focus:bg-success-hover hover:border-success-hover rounded-e-md" data-dz-dropdown="dropdown-8">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] lg:translate-x-[7.25rem] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-8">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-info text-white bg-info text-[15px] max-xl:text-[13px] duration-500 hover:bg-info-hover focus:bg-info-hover hover:border-info-hover rounded-s-md btn-info">Info</button>
<button type="button" class="btn-info dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-info text-white bg-info text-[15px] max-xl:text-[13px] duration-500 hover:bg-info-hover focus:bg-info-hover hover:border-info-hover rounded-e-md" data-dz-dropdown="dropdown-9">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] lg:translate-x-[7.25rem] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-9">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-warning text-white bg-warning text-[15px] max-xl:text-[13px] duration-500 hover:bg-warning-hover focus:bg-warning-hover hover:border-warning-hover rounded-s-md btn-warning">Warning</button>
<button type="button" class="btn-warning dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-warning text-white bg-warning text-[15px] max-xl:text-[13px] duration-500 hover:bg-warning-hover focus:bg-warning-hover hover:border-warning-hover rounded-e-md" data-dz-dropdown="dropdown-10">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] lg:translate-x-[7.25rem] translate-x-[0.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-10">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button type="button" class="py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 border border-danger text-white bg-danger text-[15px] max-xl:text-[13px] duration-500 hover:bg-danger-hover focus:bg-danger-hover hover:border-danger-hover rounded-s-md btn-danger">Danger</button>
<button type="button" class="btn-danger dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-danger text-white bg-danger text-[15px] max-xl:text-[13px] duration-500 hover:bg-danger-hover focus:bg-danger-hover hover:border-danger-hover rounded-e-md" data-dz-dropdown="dropdown-11">
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] lg:translate-x-[7.25rem] translate-x-0 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-11">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
</div>
Sizing
<div class="dropdown-size">
<!-- Large button groups (default and split) -->
<div class="btn-group mb-1 inline-flex">
<button class="dz-dropdown dropdown-toggle py-4 px-8 max-xl:py-3 max-xl:px-4 leading-5 border border-primary text-white bg-primary text-lg max-xl:text-[13px] duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-md btn-lg" type="button" data-dz-dropdown="dropdown-12">
Large button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-12">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button class="py-4 px-8 max-xl:py-3 max-xl:px-4 leading-5 border border-primary text-white bg-primary text-lg max-xl:text-[13px] duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-s-md" type="button">
Large split button
</button>
<button type="button" class="dz-dropdown dropdown-toggle dropdown-toggle-split px-2.5 opacity-80 border border-primary text-white bg-primary sm:text-lg text-[13px] duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-e-md" data-dz-dropdown="dropdown-13">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[3.5rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-13">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group mb-1 inline-flex">
<button class="dz-dropdown py-[5px] px-3 border border-primary text-white bg-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-md dropdown-toggle" type="button" data-dz-dropdown="dropdown-14">
Small button
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[2.1rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-14">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-1 inline-flex">
<button class="py-[5px] px-3 border border-primary text-white bg-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-s-md btn-sm" type="button">
Small split button
</button>
<button type="button" class="dz-dropdown dropdown-toggle after:ml-0 dropdown-toggle-split px-1.5 opacity-80 border border-primary text-white bg-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-e-md" data-dz-dropdown="dropdown-15">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[2.1rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown-15">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Another action</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-[#0000002d] dark:border-[#ffffff1a]"></div>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Separated link</a>
</div>
</div>
</div>
Custom style
Last 7 days
<div class="row">
<div class="md:w-1/4 sm:w-1/3 w-1/2 ">
<div class="dropdown custom-dropdown inline-block mb-4">
<div data-dz-dropdown="dropdown-16" class="dz-dropdown text-body-color sm:text-sm text-[13px]">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</div>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-16">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="md:w-1/4 mb-4 sm:w-1/3 w-1/2">
<div class="dropdown custom-dropdown inline-block mb-4">
<button type="button" class="dz-dropdown sm:py-[5px] sm:px-3 py-2.5 px-4 border border-primary text-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary hover:text-white focus:text-white rounded-md" data-dz-dropdown="dropdown-17">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-17">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2 mb-4 mb-sm-0">
<div class="dropdown custom-dropdown inline-block mb-4">
<button type="button" class="dz-dropdown sm:py-[5px] sm:px-3 py-2.5 px-4 border border-primary text-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary hover:text-white focus:text-white rounded-md" data-dz-dropdown="dropdown-18">Last 1 Hour
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-18">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 1 hour</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 2 hour</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 3 hour</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2 mb-4 mb-sm-0">
<div class="dropdown custom-dropdown inline-block mb-4">
<button type="button" class="dz-dropdown py-[5px] px-3 border border-primary text-white bg-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-md btn-primary" data-dz-dropdown="dropdown-19">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-19">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 1 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 6 Month</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Last 10 Month</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2 mb-4 mb-sm-0">
<div class="dropdown custom-dropdown inline-block mb-4">
<button type="button" class="dz-dropdown py-[5px] px-3 border border-primary text-white bg-primary sm:text-[13px] text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-md btn-primary flex items-center" data-dz-dropdown="dropdown-20">
<i class="ti-search mr-2 mt-1"></i> 3 AM
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-20">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">6 AM</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">9 AM</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">12 AM</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2 mb-4 mb-sm-0">
<div class="dropdown custom-dropdown inline-block mb-4">
<button type="button" class="dz-dropdown py-[5px] px-3 border border-primary text-white bg-primary text-[13px] max-xl:text-xs duration-500 hover:bg-hover-primary hover:border-hover-primary focus:bg-hover-primary focus:border-hover-primary rounded-md btn-primary flex-wrap" data-dz-dropdown="dropdown-21">
<i class="ti-calendar me-3"></i> March 20, 2018 To April
20, 2018
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] translate-y-[0.2rem] max-sm:translate-x-[-4.8rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden dropdown-menu-end" id="dropdown-21">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">May 20, 2018 To June 20,
2018</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">July 20, 2018 To August
20, 2018</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2">
<div class="dropdown custom-dropdown inline-block mb-4">
<div class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-primary tp-btn ml-4 hover:bg-primary rounded-md dz-dropdown" data-dz-dropdown="dropdown-22">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5202 17.4167C13.5202 18.81 12.3927 19.9375 10.9994 19.9375C9.60601 19.9375 8.47852 18.81 8.47852 17.4167C8.47852 16.0233 9.60601 14.8958 10.9994 14.8958C12.3927 14.8958 13.5202 16.0233 13.5202 17.4167ZM9.85352 17.4167C9.85352 18.0492 10.3669 18.5625 10.9994 18.5625C11.6319 18.5625 12.1452 18.0492 12.1452 17.4167C12.1452 16.7842 11.6319 16.2708 10.9994 16.2708C10.3669 16.2708 9.85352 16.7842 9.85352 17.4167Z" fill="var(--primary)"/>
<path d="M13.5202 4.58369C13.5202 5.97699 12.3927 7.10449 10.9994 7.10449C9.60601 7.10449 8.47852 5.97699 8.47852 4.58369C8.47852 3.19029 9.60601 2.06279 10.9994 2.06279C12.3927 2.06279 13.5202 3.19029 13.5202 4.58369ZM9.85352 4.58369C9.85352 5.21619 10.3669 5.72949 10.9994 5.72949C11.6319 5.72949 12.1452 5.21619 12.1452 4.58369C12.1452 3.95119 11.6319 3.43779 10.9994 3.43779C10.3669 3.43779 9.85352 3.95119 9.85352 4.58369Z" fill="var(--primary)"/>
<path d="M13.5202 10.9997C13.5202 12.393 12.3927 13.5205 10.9994 13.5205C9.60601 13.5205 8.47852 12.393 8.47852 10.9997C8.47852 9.6063 9.60601 8.4788 10.9994 8.4788C12.3927 8.4788 13.5202 9.6063 13.5202 10.9997ZM9.85352 10.9997C9.85352 11.6322 10.3669 12.1455 10.9994 12.1455C11.6319 12.1455 12.1452 11.6322 12.1452 10.9997C12.1452 10.3672 11.6319 9.8538 10.9994 9.8538C10.3669 9.8538 9.85352 10.3672 9.85352 10.9997Z" fill="var(--primary)"/>
</svg>
</div>
<div class="dz-dropdown-menu absolute translate-x-[-167px] translate-y-2.5 overflow-hidden rounded-md z-[9] bg-white dark:bg-[#182237] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] min-w-[13rem] text-left py-2 hidden" id="dropdown-22">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 1</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 2</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 3</a>
</div>
</div>
</div>
<div class="md:w-1/4 sm:w-1/3 w-1/2">
<div class="dropdown custom-dropdown inline-block mb-4">
<div class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-primary tp-btn ml-4 hover:bg-primary rounded-md dz-dropdown" data-dz-dropdown="dropdown-23">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5202 17.4167C13.5202 18.81 12.3927 19.9375 10.9994 19.9375C9.60601 19.9375 8.47852 18.81 8.47852 17.4167C8.47852 16.0233 9.60601 14.8958 10.9994 14.8958C12.3927 14.8958 13.5202 16.0233 13.5202 17.4167ZM9.85352 17.4167C9.85352 18.0492 10.3669 18.5625 10.9994 18.5625C11.6319 18.5625 12.1452 18.0492 12.1452 17.4167C12.1452 16.7842 11.6319 16.2708 10.9994 16.2708C10.3669 16.2708 9.85352 16.7842 9.85352 17.4167Z" fill="var(--primary)"/>
<path d="M13.5202 4.58369C13.5202 5.97699 12.3927 7.10449 10.9994 7.10449C9.60601 7.10449 8.47852 5.97699 8.47852 4.58369C8.47852 3.19029 9.60601 2.06279 10.9994 2.06279C12.3927 2.06279 13.5202 3.19029 13.5202 4.58369ZM9.85352 4.58369C9.85352 5.21619 10.3669 5.72949 10.9994 5.72949C11.6319 5.72949 12.1452 5.21619 12.1452 4.58369C12.1452 3.95119 11.6319 3.43779 10.9994 3.43779C10.3669 3.43779 9.85352 3.95119 9.85352 4.58369Z" fill="var(--primary)"/>
<path d="M13.5202 10.9997C13.5202 12.393 12.3927 13.5205 10.9994 13.5205C9.60601 13.5205 8.47852 12.393 8.47852 10.9997C8.47852 9.6063 9.60601 8.4788 10.9994 8.4788C12.3927 8.4788 13.5202 9.6063 13.5202 10.9997ZM9.85352 10.9997C9.85352 11.6322 10.3669 12.1455 10.9994 12.1455C11.6319 12.1455 12.1452 11.6322 12.1452 10.9997C12.1452 10.3672 11.6319 9.8538 10.9994 9.8538C10.3669 9.8538 9.85352 10.3672 9.85352 10.9997Z" fill="var(--primary)"/>
</svg>
</div>
<div class="dz-dropdown-menu absolute translate-x-[-167px] translate-y-2.5 overflow-hidden rounded-md z-[9] bg-white dark:bg-[#182237] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] min-w-[13rem] text-left py-2 hidden" id="dropdown-23">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 1</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 2</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Option 3</a>
</div>
</div>
</div>
</div>