Input by jamik-dev

1<form class="px-4 w-full max-w-[330px]">
2  <label
3    class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
4    for="default-search"
5    >Search</label
6  >
7  <div class="relative">
8    <div
9      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
10    >
11      <svg
12        viewBox="0 0 20 20"
13        fill="none"
14        xmlns="http://www.w3.org/2000/svg"
15        aria-hidden="true"
16        class="w-4 h-4 text-gray-500 dark:text-gray-400"
17      >
18        <path
19          d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
20          stroke-width="2"
21          stroke-linejoin="round"
22          stroke-linecap="round"
23          stroke="currentColor"
24        ></path>
25      </svg>
26    </div>
27    <input
28      required=""
29      placeholder="Search"
30      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"
31      id="default-search"
32      type="search"
33    />
34    <button
35      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"
36    >
37      <svg
38        viewBox="0 0 20 20"
39        fill="none"
40        xmlns="http://www.w3.org/2000/svg"
41        aria-hidden="true"
42        class="w-4 h-4"
43      >
44        <path
45          d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
46          stroke-width="2"
47          stroke-linejoin="round"
48          stroke-linecap="round"
49          stroke="currentColor"
50        ></path>
51      </svg>
52      <span class="sr-only">Search</span>
53    </button>
54  </div>
55</form>
56