Search and Filter Card Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet" />

<style>
  .body {
    font-family: "Plus Jakarta Sans", sans-serif;
  }
</style>

<section
  class="flex flex-col items-center justify-center w-screen h-screen space-y-4 bg-gray-200 md:flex-row md:space-y-0 md:space-x-4">
  <div class="w-screen max-w-screen-md m-10">
    <div class="flex flex-col">
      <div class="p-6 bg-white border border-indigo-200 shadow-lg rounded-xl">
        <form action="" method="GET">
          <div class="relative flex items-center justify-between w-full mb-10 rounded-md">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="absolute block text-indigo-400 left-2 h-7 w-7">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>

            <input type="name" name="search"
              class="w-full h-12 py-4 pl-12 pr-40 bg-indigo-100 border border-indigo-100 rounded-md shadow-sm outline-none cursor-text focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
              placeholder="Search by product name or category" />
          </div>

          <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div class="flex flex-col">
              <label for="start_date" class="text-sm font-medium text-indigo-900">Transaction Start Date</label>
              <input type="date" id="start_date"
                class="block w-full px-2 py-2 mt-2 bg-indigo-100 border border-indigo-100 rounded-md shadow-sm outline-none cursor-pointer focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>

            <div class="flex flex-col">
              <label for="end_date" class="text-sm font-medium text-indigo-900">Transaction End Date</label>
              <input type="date" id="end_date"
                class="block w-full px-2 py-2 mt-2 bg-indigo-100 border border-indigo-100 rounded-md shadow-sm outline-none cursor-pointer focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>

            <div class="flex flex-col">
              <label for="brand" class="text-sm font-medium text-indigo-900">Brand</label>
              <select id="brand"
                class="block w-full px-2 py-2 mt-2 bg-indigo-100 border border-indigo-100 rounded-md shadow-sm outline-none cursor-pointer focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option>Adidas</option>
                <option>Nike</option>
                <option>Rebook</option>
                <option>Puma</option>
                <option>Vans</option>
                <option>Converse</option>
              </select>
            </div>
          </div>

          <div class="grid justify-start w-full grid-cols-2 mt-8 space-x-4 md:flex">
            <button
              class="flex items-center px-8 py-2 font-medium text-indigo-700 bg-indigo-100 rounded-lg outline-none hover:opacity-80 focus:ring">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-4 h-4 mr-2">
                <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>
              Reset
            </button>
            <button
              class="flex items-center px-8 py-2 font-medium text-white bg-indigo-600 rounded-lg outline-none hover:opacity-80 focus:ring">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-4 h-4 mr-2">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
              </svg>
              Search
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>