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>

<!-- 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>