Table Headers
- Default table header
- Table header with text and button
- Table header with CTA and button group
- Multi-level table header with filters
- Table header with date range picker filter
- Table header with tooltip and select filters
- Table header with statistics
- Table header for comparison
- Table header with button group filters and export
- Table header with tabs
- Table header with search input
- Table header with settings
- Table header with breadcrumb
Use the table header component to append options and controls on top of a table component to indicate titles, filters, sorting elements, and other settings.
Default table header
Use this free example of a header component that you can position on top of a header to add a search functionality, a CRUD button, table options and filtering results.
Default table header
html
<section class="bg-gray-50 dark:bg-gray-900 h-screen flex items-center">
<div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
<!-- Start coding here -->
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
<div
class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4"
>
<div class="w-full md:w-1/2">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
type="text"
id="simple-search"
class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Search"
required=""
/>
</div>
</form>
</div>
<div
class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add product
</button>
<div class="flex items-center w-full space-x-3 md:w-auto">
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
<svg
class="-ml-1 mr-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
Actions
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>Mass Edit</a
>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete all</a
>
</div>
</div>
<button
id="filterDropdownButton"
data-dropdown-toggle="filterDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4 mr-2 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
clip-rule="evenodd"
/>
</svg>
Filter
<svg
class="-mr-1 ml-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</button>
<!-- Dropdown menu -->
<div
id="filterDropdown"
class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow dark:bg-gray-700"
>
<h6
class="mb-3 text-sm font-medium text-gray-900 dark:text-white"
>
Category
</h6>
<ul class="space-y-2 text-sm" aria-labelledby="dropdownDefault">
<li class="flex items-center">
<input
id="apple"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="apple"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Apple (56)
</label>
</li>
<li class="flex items-center">
<input
id="fitbit"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="fitbit"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Fitbit (56)
</label>
</li>
<li class="flex items-center">
<input
id="dell"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="dell"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Dell (56)
</label>
</li>
<li class="flex items-center">
<input
id="asus"
type="checkbox"
value=""
checked
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="asus"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Asus (97)
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Table header with text and button
This free example can be used to show a title, description, and CTA button for creating a new item inside the table data.
Table header with text and button
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div
class="flex-row items-center justify-between p-4 space-y-3 sm:flex sm:space-y-0 sm:space-x-4"
>
<div>
<h5 class="mr-3 font-semibold dark:text-white">Flowbite Users</h5>
<p class="text-gray-500 dark:text-gray-400">
Manage all your existing users or add a new one
</p>
</div>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 mr-2 -ml-1"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
/>
</svg>
Add new user
</button>
</div>
</div>
</div>
</section>Table header with CTA and button group
Use this example to show a CTA button and a list of buttons grouped on the right side of the table header to toggle options.
Table header with CTA and button group
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 md:rounded-lg"
>
<div
class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4"
>
<button
type="button"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white rounded-lg md:w-auto bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2 -ml-1"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add product
</button>
<div
class="inline-flex flex-col w-full rounded-md shadow-sm md:w-auto md:flex-row"
role="group"
>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-t-lg md:rounded-tr-none md:rounded-l-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Positions
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-gray-200 border-x md:border-x-0 md:border-t md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Estimated Traffic
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-gray-200 border-x md:border-x-0 md:border-l md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Visibility
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-b-lg md:rounded-bl-none md:rounded-r-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
All for flowbite.com
</button>
</div>
</div>
</div>
</div>
</section>Multi-level table header with filters
Use this example to show a multiple rows of data and actions on top of a table including dropdown filters, inline filters, CTA buttons, search inputs, and more.
Multi-level table header with filters
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative px-4 bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div class="flex items-center justify-between pt-4 md:pb-4">
<div class="flex items-center flex-1 space-x-2">
<h5>
<span class="dark:text-white">View all products</span>
</h5>
</div>
<div class="flex items-center space-x-3">
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
View JSON
</button>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
Export
</button>
</div>
</div>
<div
class="flex flex-col-reverse items-stretch justify-between pb-4 space-y-3 md:flex-row md:items-center md:space-y-0"
>
<div
class="flex flex-col w-full space-y-3 lg:w-2/3 md:space-y-0 md:flex-row md:items-center"
>
<form class="flex-1 w-full md:max-w-sm md:mr-4">
<label
for="default-search"
class="text-sm font-medium text-gray-900 sr-only dark:text-white"
>Search</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-500 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewbox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<input
type="search"
id="default-search"
class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Search..."
required=""
/>
<button
type="submit"
class="absolute top-0 bottom-0 right-0 px-4 py-2 text-sm font-medium text-white rounded-r-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Search
</button>
</div>
</form>
<div class="flex items-center space-x-4">
<div>
<button
id="filterDropdownButton"
data-dropdown-toggle="filterDropdown"
type="button"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-4 h-4 mr-2 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
/>
</svg>
Filter
</button>
<div
id="filterDropdown"
class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow dark:bg-gray-700"
>
<h6
class="mb-3 text-sm font-medium text-gray-900 dark:text-white"
>
Category
</h6>
<ul class="space-y-2 text-sm" aria-labelledby="dropdownDefault">
<li class="flex items-center">
<input
id="apple"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="apple"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Apple (56)
</label>
</li>
<li class="flex items-center">
<input
id="fitbit"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="fitbit"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Fitbit (56)
</label>
</li>
<li class="flex items-center">
<input
id="dell"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="dell"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Dell (56)
</label>
</li>
<li class="flex items-center">
<input
id="asus"
type="checkbox"
value=""
checked
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="asus"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>
Asus (97)
</label>
</li>
</ul>
</div>
</div>
<div>
<button
id="configurationDropdownButton"
data-dropdown-toggle="configurationDropdown"
type="button"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2 text-gray-400"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
clip-rule="evenodd"
/>
</svg>
Configurations
</button>
<div
id="configurationDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="configurationDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
By Category
</a>
</li>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
By Brand
</a>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Reset
</a>
</div>
</div>
</div>
</div>
</div>
<div
class="flex flex-col items-stretch justify-end flex-shrink-0 w-full pb-4 md:pb-0 md:w-auto md:flex-row md:items-center md:space-x-3"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-1.5 -ml-1"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add new product
</button>
</div>
</div>
<div class="flex flex-wrap pt-1 pb-4 border-t dark:border-gray-700">
<div
class="items-center hidden mt-3 mr-4 text-sm font-medium text-gray-900 md:flex dark:text-white"
>
Show only:
</div>
<div class="flex flex-wrap">
<div class="flex items-center mt-3 mr-4">
<input
id="all-products"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="all-products"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
All
</label>
</div>
<div class="flex items-center mt-3 mr-4">
<input
id="active"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="active"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Active products
</label>
</div>
<div class="flex items-center mt-3 mr-4">
<input
id="pending"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="pending"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Pending products
</label>
</div>
<div class="flex items-center mt-3 mr-4">
<input
id="inactive"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="inactive"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Inactive products
</label>
</div>
</div>
</div>
</div>
</div>
</section>Table header with date range picker filter
Use this example to filter table results using a date range picker to pick a start and end time and a button to apply the options.
Table header with date range picker filter
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div class="px-4 divide-y dark:divide-gray-700">
<div class="flex items-center justify-between py-3">
<div class="flex items-center flex-1 space-x-2">
<h5 class="font-semibold dark:text-white">Total data used</h5>
</div>
<div class="flex items-center space-x-2 md:space-x-4">
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
View JSON
</button>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
Export
</button>
</div>
</div>
<div
class="flex flex-col items-stretch py-4 md:flex-row md:items-center"
>
<div
class="flex flex-col space-y-3 md:flex-row md:items-center md:w-2/3 md:space-y-0"
>
<div
date-rangepicker
datepicker-orientation="bottom"
class="flex flex-col space-y-1 md:space-y-0 md:flex-row md:items-center md:mr-5"
>
<div class="relative min-w-[12rem]">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
></path>
</svg>
</div>
<input
name="start"
type="text"
id="start"
placeholder="Select start date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
/>
</div>
<span class="mx-auto text-gray-500 md:mx-4">to</span>
<div class="relative min-w-[12rem]">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
></path>
</svg>
</div>
<input
name="end"
type="text"
placeholder="Select end date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
/>
</div>
</div>
<div class="md:mr-4 min-w-[10rem]">
<select
id="compare"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Compare to</option>
<option value="last_year">Last Year</option>
<option value="last_month">Last Month</option>
<option value="yesterday">Yesterday</option>
</select>
</div>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 w-full px-4 py-2 text-sm font-medium text-white rounded-lg md:w-auto bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
Run report
</button>
</div>
</div>
</div>
</div>
</div>
</section>Table header with tooltip and select filters
Use this example to show a title with an informative tooltip and a row of select input filter elements.
Table header with tooltip and select filters
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
<div
class="flex flex-col items-center justify-between py-4 mx-4 space-y-3 border-b md:flex-row md:space-y-0 md:space-x-4 dark:border-gray-700"
>
<div class="flex items-center w-full space-x-3">
<h5 class="font-semibold dark:text-white">Flowbite Products</h5>
<div class="font-medium text-gray-500 dark:text-gray-400">
6,560 results
</div>
<div data-tooltip-target="results-tooltip">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500 dark:text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">More info</span>
</div>
<div
id="results-tooltip"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Showing 1-10 of 6,560 results
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>
<div class="flex flex-row items-center justify-end w-full space-x-3">
<button
type="button"
class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-white rounded-lg md:w-auto bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
></path>
</svg>
Add new product
</button>
<button
type="button"
class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-3 h-3 mr-2"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="currentColor"
viewBox="0 0 12 13"
aria-hidden="true"
>
<path d="M1 2V1h10v3H1V2Zm0 4h5v6H1V6Zm8 0h2v6H9V6Z" />
</svg>
Manage Columns
</button>
</div>
</div>
<div
class="flex flex-col-reverse items-start justify-between p-4 border-b md:flex-row md:items-center md:space-x-4 dark:border-gray-700"
>
<div class="mt-3 md:mt-0">
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
<svg
class="-ml-1 mr-1.5 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
></path>
</svg>
Actions
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
Mass Edit
</a>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Delete all
</a>
</div>
</div>
</div>
<div class="grid w-full grid-cols-1 md:grid-cols-4 lg:w-2/3 md:gap-4">
<div class="w-full">
<label for="brand" class="sr-only">Brand</label>
<select
id="brand"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
>
<option selected>Brand</option>
<option value="purple">Samsung</option>
<option value="primary">Apple</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
</select>
</div>
<div class="w-full">
<label for="price" class="sr-only">Price</label>
<select
id="price"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
>
<option selected>Price</option>
<option value="below-100">$ 1-100</option>
<option value="below-500">$ 101-500</option>
<option value="below-1000">$ 501-1000</option>
<option value="over-1000">$ 1001+</option>
</select>
</div>
<div class="w-full">
<label for="category" class="sr-only">Category</label>
<select
id="category"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
>
<option selected>Category</option>
<option value="pc">PC</option>
<option value="phone">Phone</option>
<option value="tablet">Tablet</option>
<option value="console">Gaming/Console</option>
</select>
</div>
<div class="w-full">
<label for="color" class="sr-only">Color</label>
<select
id="color"
class="block py-2.5 px-0 w-full text-sm text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
>
<option selected>Color</option>
<option value="purple">Purple</option>
<option value="primary">primary</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>Table header with statistics
This example can be used on top of a table component to show statistics and a couple of CTA and option buttons.
Table header with statistics
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div
class="flex flex-col px-4 py-3 space-y-3 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4"
>
<div class="flex items-center flex-1 space-x-4">
<h5>
<span class="text-gray-500">All keywords:</span>
<span class="dark:text-white">146</span>
</h5>
<h5>
<span class="text-gray-500">Total volume:</span>
<span class="dark:text-white">88.4k</span>
</h5>
</div>
<div
class="flex flex-col flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2 -ml-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
></path>
</svg>
Add to keyword list
</button>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
Update metrics 1/250
</button>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
Export
</button>
</div>
</div>
</div>
</div>
</section>Table header for comparison
Use this example as a header for a table component to show a list of comparison fields, CTA and options buttons, and a title with an informational tooltip.
Table header for comparison
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
<div
class="flex flex-col items-start justify-between p-4 space-y-3 dark:bg-gray-800 md:flex-row md:items-center md:space-y-0 md:space-x-4"
>
<div class="flex items-center">
<h5 class="mr-3 font-semibold dark:text-white">Compare Products</h5>
<div data-tooltip-target="info-tooltip">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
/>
</svg>
<span class="sr-only">More info</span>
</div>
<div
id="info-tooltip"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Selected Xbox Series S, PlayStation 5, and Xbox Series X
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div
class="flex flex-row items-center justify-end flex-shrink-0 w-auto space-x-3"
>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
></path>
</svg>
Add new product
</button>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-2 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
/>
</svg>
Reset all
</button>
</div>
</div>
<div
class="mx-4 border-t dark:mx-0 dark:border-gray-700 dark:bg-gray-800"
></div>
<div
class="flex flex-col items-center justify-between px-4 pb-4 space-y-3 md:pb-0 md:mt-4 dark:bg-gray-800 md:flex-row md:space-y-0 md:space-x-4"
>
<ul
class="flex-wrap hidden text-sm font-medium text-center text-gray-500 md:flex dark:text-gray-400"
>
<li class="mb-4 mr-2 lg:mr-4">
<a
href="#"
class="inline-block px-4 py-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
>
General Information
</a>
</li>
<li class="mb-4 mr-2 lg:mr-4">
<a
href="#"
class="inline-block px-4 py-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
aria-current="page"
>
Technical Information
</a>
</li>
<li class="mb-4 mr-2 lg:mr-4">
<a
href="#"
class="inline-block px-4 py-2 text-white rounded-full bg-primary-600 active"
>
Delivery Information
</a>
</li>
<li class="mb-4 mr-2 lg:mr-4">
<a
href="#"
class="inline-block px-4 py-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
>
Ratings
</a>
</li>
</ul>
<div class="flex items-center w-full space-x-4 md:w-auto">
<select
id="list-navigation"
class="block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-lg md:hidden bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Overview</option>
<option value="general">General Information</option>
<option value="technical">Technical Information</option>
<option value="delivery">Delivery Information</option>
<option value="ratings">Ratings</option>
</select>
<div>
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:mb-4 md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
Actions
<svg
class="-mr-1 ml-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>Mass Edit</a
>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete all</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Table header with button group filters and export
Get started with this example to show a list of buttons grouped together that you can use to filter results together with export functions, dropdown buttons, and more.
Table header with button group filters and export
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
<div class="px-4 divide-y dark:divide-gray-700">
<div
class="flex flex-col py-3 space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 sm:space-x-4"
>
<div class="flex items-center flex-1 space-x-2">
<h5>
<span class="font-semibold dark:text-white">SERP Analysis</span>
<span class="ml-1 text-gray-500 dark:text-gray-400"
>6,560,067 Results</span
>
</h5>
<div data-tooltip-target="results-tooltip">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">More info</span>
</div>
<div
id="results-tooltip"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Showing 1-100 of 436 results
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div class="flex items-center space-x-4">
<a
href="#"
class="flex items-center text-sm font-medium text-primary-600 dark:text-primary-500 hover:underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2h-1.528A6 6 0 004 9.528V4z"
/>
<path
fill-rule="evenodd"
d="M8 10a4 4 0 00-3.446 6.032l-1.261 1.26a1 1 0 101.414 1.415l1.261-1.261A4 4 0 108 10zm-2 4a2 2 0 114 0 2 2 0 01-4 0z"
clip-rule="evenodd"
/>
</svg>
View SERP
</a>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
Export
</button>
</div>
</div>
<div
class="flex flex-col items-stretch justify-between py-4 space-y-3 sm:flex-row sm:items-center sm:space-y-0"
>
<div class="items-center block space-y-2 sm:space-y-0 sm:flex">
<div class="flex-shrink-0 font-semibold dark:text-white">
Filter by:
</div>
<div class="flex items-center">
<select
id="compare"
class="lg:hidden mr-4 sm:mx-4 min-w-[10rem] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Current year</option>
<option value="past_month">Past month</option>
<option value="last_30_days">Last 30 days</option>
<option value="last_7_days">Last 7 days</option>
</select>
<div
class="flex-col hidden w-full mx-4 rounded-md shadow-sm md:w-auto lg:inline-flex md:flex-row"
role="group"
>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-t-lg md:rounded-tr-none md:rounded-l-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Positions
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-gray-200 border-x md:border-x-0 md:border-t md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Estimated Traffic
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-gray-200 border-x md:border-x-0 md:border-l md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Visibility
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-b-lg md:rounded-bl-none md:rounded-r-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
All for flowbite.com
</button>
</div>
<a
href="#"
class="flex items-center flex-shrink-0 text-sm font-medium text-primary-600 dark:text-primary-500 hover:underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-1"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z"
clip-rule="evenodd"
/>
</svg>
More options
</a>
</div>
</div>
<div
class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 sm:w-auto sm:flex-row sm:space-y-0 sm:items-center sm:space-x-3"
>
<div class="flex items-center w-full space-x-3 sm:w-auto">
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
Actions
<svg
class="-mr-1 ml-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>Mass Edit</a
>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete all</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Table header with tabs
Use this example to show navigational tabs for the table component and change the content inside when clicking on one or the other.
Table header with tabs
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div class="px-4 divide-y dark:divide-gray-700">
<div
class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
>
<div>
<h5 class="mb-1 font-semibold dark:text-white">Bonnie Green</h5>
<div class="flex items-center text-gray-500 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
/>
</svg>
<p class="text-sm">New York, United States</p>
</div>
</div>
<div class="flex items-center space-x-6">
<div>
<h5 class="mb-1 text-gray-500 dark:text-gray-400">
Pending payments
</h5>
<p class="text-lg font-bold text-orange-600">$832</p>
</div>
<div>
<h5 class="mb-1 text-gray-500 dark:text-gray-400">
Received payments
</h5>
<p class="text-lg font-bold text-green-500">$1956</p>
</div>
</div>
</div>
<div
class="flex flex-col py-4 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4 md:py-0"
>
<select
id="list-navigation"
class="block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-lg md:hidden bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Overview</option>
<option value="works">Works</option>
<option value="payments">Payments</option>
<option value="clients">Clients</option>
</select>
<ul
class="flex-wrap hidden text-sm font-medium text-center text-gray-500 md:flex dark:text-gray-400"
>
<li class="mr-2">
<a
href="#"
class="inline-flex items-center py-4 pr-4 border-b border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group"
>
<svg
aria-hidden="true"
class="w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
clip-rule="evenodd"
></path>
</svg>
Overview
</a>
</li>
<li class="mr-2">
<a
href="#"
class="inline-flex items-center p-4 border-b rounded-t-lg text-primary-600 border-primary-600 active dark:text-primary-500 dark:border-primary-500 group"
aria-current="page"
>
<svg
aria-hidden="true"
class="w-4 h-4 mr-2 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
></path>
</svg>
Works
</a>
</li>
<li class="mr-2">
<a
href="#"
class="inline-flex items-center p-4 border-b border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
/>
</svg>
Payments
</a>
</li>
<li class="mr-2">
<a
href="#"
class="inline-flex items-center p-4 border-b border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
/>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
/>
</svg>
Clients
</a>
</li>
</ul>
<button
type="button"
class="flex items-center justify-center flex-shrink-0 px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
></path>
</svg>
Add new item
</button>
</div>
</div>
</div>
</div>
</section>Table header with search input
This example can be used to show a search input field inside the table header to filter results by a query string.
Table header with search input
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
<div class="px-4 divide-y dark:divide-gray-700">
<div
class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
>
<div class="flex items-center flex-1 space-x-2">
<h5>
<span class="dark:text-white">Rankings Overview</span>
<span class="ml-1 text-gray-500 dark:text-gray-400"
>1-100 (436)</span
>
</h5>
<div data-tooltip-target="results-tooltip">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">More info</span>
</div>
<div
id="results-tooltip"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Showing 1-100 of 436 results
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div
class="flex flex-col items-start flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
>
<button
type="button"
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
/>
</svg>
Table settings
</button>
</div>
</div>
<div
class="flex flex-col items-stretch justify-between py-4 space-y-3 md:flex-row md:items-center md:space-x-3 md:space-y-0"
>
<div class="w-full md:w-1/2">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
</div>
<input
type="text"
id="simple-search"
placeholder="Search for products"
required=""
class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
/>
</div>
</form>
</div>
<div
class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-1.5 -ml-1"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add product
</button>
<button
id="filterDropdownButton"
data-dropdown-toggle="filterDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="h-4 w-4 mr-1.5 -ml-1 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
clip-rule="evenodd"
/>
</svg>
Filter options
<svg
class="-mr-1 ml-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</button>
<div
id="filterDropdown"
class="z-10 hidden w-56 p-3 bg-white rounded-lg shadow dark:bg-gray-700"
>
<h6
class="mb-3 text-sm font-medium text-gray-900 dark:text-white"
>
Category
</h6>
<ul class="space-y-2 text-sm" aria-labelledby="dropdownDefault">
<li class="flex items-center">
<input
id="apple"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="apple"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>Apple (56)</label
>
</li>
<li class="flex items-center">
<input
id="fitbit"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="fitbit"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>Microsoft (16)</label
>
</li>
<li class="flex items-center">
<input
id="razor"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
/>
<label
for="razor"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
>Razor (49)</label
>
</li>
</ul>
</div>
<div class="flex items-center w-full space-x-3 md:w-auto">
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg md:w-auto focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
Actions
<svg
class="-mr-1 ml-1.5 w-5 h-5"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>Mass Edit</a
>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete all</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Table header with settings
Use this example to show a table settings button with a title, an informative tooltip, and a list of buttons to use for additional settings.
Table header with settings
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div class="px-4 divide-y dark:divide-gray-700">
<div
class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
>
<div class="flex items-center flex-1 space-x-2">
<h5>
<span class="dark:text-white">Rankings Overview</span>
<span class="ml-1 text-gray-500 dark:text-gray-400"
>1-100 (436)</span
>
</h5>
<div data-tooltip-target="results-tooltip">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-400"
viewbox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">More info</span>
</div>
<div
id="results-tooltip"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Showing 1-100 of 436 results
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div
class="flex flex-col items-start flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
>
<button
type="button"
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
/>
</svg>
Table settings
</button>
</div>
</div>
<div
class="flex flex-col items-stretch justify-between py-4 space-y-3 md:flex-row md:items-center md:space-y-0"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add more keywords
</button>
<div
class="inline-flex flex-col w-full rounded-md shadow-sm md:w-auto md:flex-row"
role="group"
>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-t-lg md:rounded-tr-none md:rounded-l-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Positions
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-gray-200 border-x md:border-x-0 md:border-t md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Estimated Traffic
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-gray-200 border-x md:border-x-0 md:border-l md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Visibility
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-b-lg md:rounded-bl-none md:rounded-r-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
All for flowbite.com
</button>
</div>
</div>
</div>
</div>
</div>
</section>Table header with breadcrumb
This example can be used to show navigation breadcrumbs, a list of select input filter elements, radio input elements, and dropdown buttons.
Table header with breadcrumb
html
<section class="flex items-center h-screen bg-gray-50 dark:bg-gray-900">
<div class="w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<!-- Start coding here -->
<div
class="relative px-4 overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div
class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
>
<div>
<nav
class="flex px-3 py-2 mb-2 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
aria-label="Breadcrumb"
>
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a
href="#"
class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white"
>
Dashboard
</a>
</li>
<li>
<div class="flex items-center">
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
<a
href="#"
class="ml-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white"
>
2022
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400"
>
All Products
</span>
</div>
</li>
</ol>
</nav>
<h5>
<span class="dark:text-white">View list of products</span>
</h5>
</div>
<div
class="flex flex-col items-start flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-1.5 -ml-1"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add new product
</button>
</div>
</div>
<div
class="grid w-full grid-cols-2 gap-4 pb-4 md:grid-cols-3 lg:grid-cols-6"
>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Brand</option>
<option value="samsung">Samsung</option>
<option value="apple">Apple</option>
<option value="nokia">Nokia</option>
<option value="sony">Sony</option>
</select>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Category</option>
<option value="tablet">Tablet</option>
<option value="phone">Phone</option>
<option value="tv">TV</option>
<option value="console">Console</option>
</select>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="silver">Silver</option>
</select>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Category</option>
<option value="tablet">Tablet</option>
<option value="phone">Phone</option>
<option value="tv">TV</option>
<option value="console">Console</option>
</select>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Sold by</option>
<option value="samsung">Samsung</option>
<option value="apple">Apple</option>
<option value="nokia">Nokia</option>
<option value="flowbite">Flowbite</option>
</select>
<select
class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-2.5 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Return Policy</option>
<option value="30-days">30 days</option>
<option value="14-days">14 days</option>
<option value="no-returns">No returns</option>
</select>
</div>
<div
class="items-center justify-between block w-full py-3 border-t dark:border-gray-700 md:flex"
>
<div class="flex flex-wrap mb-4 md:mb-0">
<div
class="flex items-center w-full mb-2 mr-4 text-sm font-medium text-gray-900 dark:text-white md:w-auto md:mb-0"
>
Show by:
</div>
<div class="flex items-center mr-4">
<input
id="all-products"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="all-products"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
All
</label>
</div>
<div class="flex items-center mr-4">
<input
id="sort-category"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="sort-category"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
By Category
</label>
</div>
<div class="flex items-center mr-4">
<input
id="sort-price"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="sort-price"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
By Price
</label>
</div>
<div class="flex items-center mr-4">
<input
id="sort-state"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="sort-state"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
By state
</label>
</div>
<div class="flex items-center mr-4">
<input
id="sort-brand"
type="radio"
value=""
name="show-only"
class="w-4 h-4 bg-gray-100 border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="sort-brand"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
By brand
</label>
</div>
</div>
<div>
<button
id="actionsDropdownButton"
data-dropdown-toggle="actionsDropdown"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
type="button"
>
<svg
class="-ml-1 mr-1.5 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
></path>
</svg>
Actions
</button>
<div
id="actionsDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="actionsDropdownButton"
>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
Mass Edit
</a>
</li>
</ul>
<div class="py-1">
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Delete all
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>