Searches
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative w-full">
<svg
class="pointer-events-none absolute inset-y-0 left-0 h-full w-8 stroke-gray-400 pl-2.5"
viewBox="0 0 256 256"
aria-hidden="true">
<circle
cx="116"
cy="116"
r="84"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></circle>
<line
x1="175.4"
y1="175.4"
x2="224"
y2="224"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></line>
</svg>
<label for="search-basic" class="sr-only">Search Tasks</label>
<input
id="search-basic"
type="search"
placeholder="Search tasks..."
class="block w-full rounded-md border-gray-200 pl-10 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative z-0 flex w-full -space-x-px">
<div class="relative w-full">
<svg
class="pointer-events-none absolute inset-y-0 left-0 h-full w-8 stroke-gray-400 pl-2.5"
viewBox="0 0 256 256"
aria-hidden="true">
<circle
cx="116"
cy="116"
r="84"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></circle>
<line
x1="175.4"
y1="175.4"
x2="224"
y2="224"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></line>
</svg>
<label for="search-button" class="sr-only">Search Tasks</label>
<input
id="search-button"
type="search"
placeholder="Search tasks..."
class="block w-full rounded-l-md border-gray-200 pl-10 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<button
type="submit"
class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
Search
</button>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative w-full">
<svg
class="pointer-events-none absolute inset-y-0 left-0 h-full w-8 stroke-gray-400 pl-2.5"
viewBox="0 0 256 256"
aria-hidden="true">
<circle
cx="116"
cy="116"
r="84"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></circle>
<line
x1="175.4"
y1="175.4"
x2="224"
y2="224"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></line>
</svg>
<label for="search-disabled" class="sr-only">Search Tasks</label>
<input
id="search-disabled"
type="search"
placeholder="Search tasks..."
disabled
class="block w-full rounded-md border-gray-200 pl-10 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative w-full">
<svg
class="pointer-events-none absolute inset-y-0 left-0 h-full w-8 stroke-gray-400 pl-2.5"
viewBox="0 0 256 256"
aria-hidden="true">
<circle
cx="116"
cy="116"
r="84"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></circle>
<line
x1="175.4"
y1="175.4"
x2="224"
y2="224"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></line>
</svg>
<label for="search-error" class="sr-only">Search Tasks</label>
<input
id="search-error"
type="search"
placeholder="Search tasks..."
value="Dark Mode When?"
class="block w-full rounded-md border-red-600 pl-10 text-sm ring-1 ring-red-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>
<p class="mt-1 text-xs font-medium text-red-600">Our search does not work.</p>
Our search does not work.
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="relative w-full">
<svg
class="pointer-events-none absolute inset-y-0 left-0 h-full w-8 stroke-gray-400 pl-2.5"
viewBox="0 0 256 256"
aria-hidden="true">
<circle
cx="116"
cy="116"
r="84"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></circle>
<line
x1="175.4"
y1="175.4"
x2="224"
y2="224"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"></line>
</svg>
<label for="search-borderless" class="sr-only">Search Tasks</label>
<input
id="search-borderless"
type="search"
placeholder="Search tasks..."
class="block w-full border-0 border-none pl-10 text-sm transition focus:ring-0 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>