mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
59 lines
No EOL
2.1 KiB
HTML
59 lines
No EOL
2.1 KiB
HTML
<!-- From Uiverse.io by jamik-dev - Website: https://flowbite.com/docs/forms/search-input/#search-bar-example - Name: Flowbite - Tags: icon, black, button, form, input, tailwind, tailwindbutton, tailwindcss -->
|
|
<form class="px-4 w-full max-w-[330px]">
|
|
<label
|
|
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
|
|
for="default-search"
|
|
>Search</label
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="w-4 h-4 text-gray-500 dark:text-gray-400"
|
|
>
|
|
<path
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
stroke-width="2"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
required=""
|
|
placeholder="Search"
|
|
class="block w-full p-4 py-5 ps-10 text-lg text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
id="default-search"
|
|
type="search"
|
|
/>
|
|
<button
|
|
class="absolute end-2.5 bottom-1/2 translate-y-1/2 p-4 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
stroke-width="2"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
></path>
|
|
</svg>
|
|
<span class="sr-only">Search</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
|