Application Filters Accordion Dark

<div class="space-y-4">
      <details
        class="group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600"
      >
        <summary
          class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-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="divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
        >
          <div class="flex items-center justify-between px-3 py-2">
            <span class="text-sm text-gray-700 dark:text-gray-200"> 0 Selected </span>

            <button
              type="button"
              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
            >
              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 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
                  id="Option1"
                />

                <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> 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 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
                  id="Option2"
                />

                <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> 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 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
                  id="Option3"
                />

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

      <details
        class="group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600"
      >
        <summary
          class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-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="divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
        >
          <div class="flex items-center justify-between px-3 py-2">
            <span class="text-sm text-gray-700 dark:text-gray-200"> Max price is $600 </span>

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

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

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

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

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