Application Filters Dropdown

<div class="flex gap-4 sm:gap-6">
      <details class="group relative">
        <summary
          class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
        >
          <span class="text-sm font-medium"> Availability </span>

          <span class="transition-transform group-open:-rotate-180">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-4"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
              />
            </svg>
          </span>
        </summary>

        <div
          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
        >
          <div class="flex items-center justify-between px-3 py-2">
            <span class="text-sm text-gray-700"> 0 Selected </span>

            <button
              type="button"
              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
            >
              Reset
            </button>
          </div>

          <fieldset class="p-3">
            <legend class="sr-only">Checkboxes</legend>

            <div class="flex flex-col items-start gap-3">
              <label for="Option1" class="inline-flex items-center gap-3">
                <input
                  type="checkbox"
                  class="size-5 rounded border-gray-300 shadow-sm"
                  id="Option1"
                />

                <span class="text-sm font-medium text-gray-700"> Option 1 </span>
              </label>

              <label for="Option2" class="inline-flex items-center gap-3">
                <input
                  type="checkbox"
                  class="size-5 rounded border-gray-300 shadow-sm"
                  id="Option2"
                />

                <span class="text-sm font-medium text-gray-700"> Option 2 </span>
              </label>

              <label for="Option3" class="inline-flex items-center gap-3">
                <input
                  type="checkbox"
                  class="size-5 rounded border-gray-300 shadow-sm"
                  id="Option3"
                />

                <span class="text-sm font-medium text-gray-700"> Option 3 </span>
              </label>
            </div>
          </fieldset>
        </div>
      </details>

      <details class="group relative">
        <summary
          class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
        >
          <span class="text-sm font-medium"> Price </span>

          <span class="transition-transform group-open:-rotate-180">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-4"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
              />
            </svg>
          </span>
        </summary>

        <div
          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
        >
          <div class="flex items-center justify-between px-3 py-2">
            <span class="text-sm text-gray-700"> Max price is $600 </span>

            <button
              type="button"
              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
            >
              Reset
            </button>
          </div>

          <div class="flex items-center gap-3 p-3">
            <label for="MinPrice">
              <span class="text-sm text-gray-700"> Min </span>

              <input
                type="number"
                id="MinPrice"
                value="0"
                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
              />
            </label>

            <label for="MaxPrice">
              <span class="text-sm text-gray-700"> Max </span>

              <input
                type="number"
                id="MaxPrice"
                value="600"
                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
              />
            </label>
          </div>
        </div>
      </details>
    </div>