Dropdown.
Make use of Tailwind's unique Dropdown styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
DropdownDropdown
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value.
<div class="relative inline-block" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropdown Divider
The
.my-2 border-t border-bordercolor class is used to separate links inside
the dropdown menu.
<div class="relative inline-block" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
link</a>
</div>
</div>
Dropdown Header
<div class="relative inline-block" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<h5 class="py-2 px-4 block text-2xs">Dropdown header</h5>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link 1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link 2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link 3</a>
<h5 class="py-2 px-4 block text-2xs">Dropdown header</h5>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another link</a>
</div>
</div>
Disable and Active items
The
.active class is used to add active link inside the
dropdown menu
<div class="relative inline-block" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary [a.active]:bg-primary/10 [a.active]:text-primary" @click="open = false"
href="javascript:void(0);">Normal</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary [a.active]:bg-primary/10 [a.active]:text-primary active" @click="open = false"
href="javascript:void(0);">Active</a>
<a class="py-2 px-3 block pointer-events-none" @click="open = false"
href="javascript:void(0);">Disabled</a>
</div>
</div>
Align Right
<div class="relative inline-block" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropup
The
.bottom-full class makes the dropdown menu expand upwards
instead of downwards
<div class="btn-group relative inline-flex align-middle rounded-xl dropup mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary rounded-xl! dropdown-toggle"
@click="open = true">
Dropup
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute bottom-full min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl dropup mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary">
Split dropup
</button>
<button type="button"
class="btn btn-primary rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute bottom-full min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropright
Trigger dropdown menus at the right of the elements
by
.left-full to the parent
<div class="relative inline-flex align-middle rounded-xl dropend mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle"
@click="open = true">
Dropright
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute sm:left-full max-sm:top-full min-w-40 ml-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl dropend mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary"
@click="open = true">
Split dropright
</button>
<button type="button"
class="btn btn-primary rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute sm:left-full max-sm:top-full min-w-40 ml-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
dropstart
Trigger dropdown menus at the right of by adding
.right-full to the parent element
<div class="relative inline-flex align-middle rounded-xl dropstart mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary dropdown-toggle after:hidden!"
@click="open = true">
dropstart
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute sm:right-full max-sm:top-full min-w-40 mr-1 z-2"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<div class="btn-group relative inline-flex align-middle rounded-xl dropstart">
<button type="button"
class="btn btn-primary opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split after:hidden!"
@click="open = true">
<span class="sr-only">Toggle dropstart</span>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute sm:right-full max-sm:top-full min-w-40 mr-1 z-2"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<button type="button" @click="open = true" class="btn btn-primary">
Split dropstart
</button>
</div>
Button Dropdowns
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-primary"
@click="open = true">Primary</button>
<button type="button"
class="btn btn-primary rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button"
class="btn btn-secondary"
@click="open = true">Secondary</button>
<button type="button"
class="btn btn-secondary rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white"
@click="open = true">Success</button>
<button type="button"
class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-info"
@click="open = true">Info</button>
<button type="button"
class="btn btn-info rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-warning text-white"
@click="open = true">Warning</button>
<button type="button"
class="btn bg-warning text-white rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button type="button" class="btn btn-danger"
@click="open = true">Danger</button>
<button type="button"
class="btn btn-danger rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
Sizing
Button dropdowns work with buttons of all sizes dropdown buttons.
<div class="relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button class="btn btn-primary btn-lg dropdown-toggle"
type="button" @click="open = true">
Large button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button class="btn btn-primary btn-lg"
@click="open = true"type="button">
Large split button
</button>
<button type="button"
class="btn btn-lg btn-primary rounded-e-lg! opacity-85 dropdown-toggle dropdown-toggle-split"
@click="open = true" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button class="btn btn-primary btn-sm dropdown-toggle"
type="button" @click="open = true">
Small button
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-xl mb-1" x-data="{ open: false }">
<button class="btn btn-primary btn-sm"
@click="open = true" type="button">
Small split button
</button>
<button type="button"
class="btn btn-sm btn-primary rounded-e-lg! opacity-85 py-0! px-2.5! dropdown-toggle dropdown-toggle-split"
@click="open = true" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2! border-t border-bordercolor"></div>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
Custom style
<div class="relative inline-block mb-4" x-data="{ open: false }">
<div class="cursor-pointer text-2xs" @click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</div>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm btn-primary-outline"
@click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm btn-primary-outline"
@click="open = true">Last 1 Hour
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 hour</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
2 hour</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
3 hour</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm btn-primary"
@click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button"
class="btn btn-sm btn-primary flex items-center"
@click="open = true">
<i class="ti-search me-2 mt-1"></i> 3 AM
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">6
AM</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">9
AM</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">12
AM</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button"
class="btn btn-sm btn-primary flex-wrap"
@click="open = true">
<i class="ti-calendar mr-4"></i> March 20, 2018
To April
20, 2018
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">May
20, 2018 To June 20,
2018</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">July
20, 2018 To August
20, 2018</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-primary size-9 leading-9! p-0! justify-center"
@click="open = true">
<svg width="15" height="15" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.0101 13.8999C7.7367 13.8999 7.50277 13.8034 7.30833 13.6104C7.11388 13.4173 7.01666 13.1853 7.01666 12.9142C7.01666 12.6536 7.11277 12.4221 7.305 12.2199C7.49722 12.0177 7.7283 11.9166 7.99823 11.9166C8.27718 11.9166 8.51111 12.0178 8.7 12.2202C8.88888 12.4226 8.98333 12.6559 8.98333 12.9202C8.98333 13.1845 8.88947 13.4138 8.70176 13.6083C8.51405 13.8027 8.2835 13.8999 8.0101 13.8999ZM8.0101 8.98325C7.7367 8.98325 7.50277 8.88714 7.30833 8.69492C7.11388 8.5027 7.01666 8.27162 7.01666 8.00168C7.01666 7.72273 7.11277 7.48881 7.305 7.29992C7.49722 7.11103 7.7283 7.01658 7.99823 7.01658C8.27718 7.01658 8.51111 7.11044 8.7 7.29815C8.88888 7.48586 8.98333 7.71642 8.98333 7.98982C8.98333 8.26322 8.88947 8.49714 8.70176 8.69159C8.51405 8.88603 8.2835 8.98325 8.0101 8.98325ZM8.0101 4.08325C7.7367 4.08325 7.50277 3.98505 7.30833 3.78864C7.11388 3.59222 7.01666 3.35611 7.01666 3.0803C7.01666 2.80449 7.11277 2.56936 7.305 2.37492C7.49722 2.18047 7.7283 2.08325 7.99823 2.08325C8.27718 2.08325 8.51111 2.18126 8.7 2.37729C8.88888 2.5733 8.98333 2.80921 8.98333 3.08502C8.98333 3.36083 8.88947 3.59616 8.70176 3.791C8.51405 3.98584 8.2835 4.08325 8.0101 4.08325Z"
fill="#fff" />
</svg>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-primary size-9 leading-9! p-0! justify-center"
@click="open = true">
<svg width="15" height="15" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.0101 13.8999C7.7367 13.8999 7.50277 13.8034 7.30833 13.6104C7.11388 13.4173 7.01666 13.1853 7.01666 12.9142C7.01666 12.6536 7.11277 12.4221 7.305 12.2199C7.49722 12.0177 7.7283 11.9166 7.99823 11.9166C8.27718 11.9166 8.51111 12.0178 8.7 12.2202C8.88888 12.4226 8.98333 12.6559 8.98333 12.9202C8.98333 13.1845 8.88947 13.4138 8.70176 13.6083C8.51405 13.8027 8.2835 13.8999 8.0101 13.8999ZM8.0101 8.98325C7.7367 8.98325 7.50277 8.88714 7.30833 8.69492C7.11388 8.5027 7.01666 8.27162 7.01666 8.00168C7.01666 7.72273 7.11277 7.48881 7.305 7.29992C7.49722 7.11103 7.7283 7.01658 7.99823 7.01658C8.27718 7.01658 8.51111 7.11044 8.7 7.29815C8.88888 7.48586 8.98333 7.71642 8.98333 7.98982C8.98333 8.26322 8.88947 8.49714 8.70176 8.69159C8.51405 8.88603 8.2835 8.98325 8.0101 8.98325ZM8.0101 4.08325C7.7367 4.08325 7.50277 3.98505 7.30833 3.78864C7.11388 3.59222 7.01666 3.35611 7.01666 3.0803C7.01666 2.80449 7.11277 2.56936 7.305 2.37492C7.49722 2.18047 7.7283 2.08325 7.99823 2.08325C8.27718 2.08325 8.51111 2.18126 8.7 2.37729C8.88888 2.5733 8.98333 2.80921 8.98333 3.08502C8.98333 3.36083 8.88947 3.59616 8.70176 3.791C8.51405 3.98584 8.2835 4.08325 8.0101 4.08325Z"
fill="#fff" />
</svg>
</button>
<div class="bg-dropdown shadow-dropdown rounded-xl py-2 absolute top-full left-0 min-w-40 mt-1 z-1 text-sm"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
</div>
</div>