ニューモーフィックイベントフィルター

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-100 to-yellow-100 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl bg-transparent
    shadow-xl shadow-orange-300/50 dark:shadow-gray-950
    dark:bg-gradient-to-br dark:from-gray-850 dark:to-gray-900
    text-orange-900 dark:text-gray-200
    ">
    <h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-center
      text-orange-800 dark:text-orange-400
      [text-shadow:_0_1px_0_rgb(255_255_255_/_40%)] dark:[text-shadow:_none]
      ">
      Filter Events
    </h2>

    <div class="space-y-6">
      <!-- Category Filter -->
      <div>
        <label for="category" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
          Category
        </label>
        <div class="relative">
          <select id="category" class="block w-full px-4 py-2 rounded-xl appearance-none
            bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
            shadow-md shadow-orange-200/50 dark:shadow-gray-950
            border border-orange-100 dark:border-gray-700
            focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
            neumorphic-inset
            text-orange-900 dark:text-gray-100
            ">
            <option value="">All Categories</option>
            <option value="tech">Technology</option>
            <option value="design">Design & UX</option>
            <option value="marketing">Marketing</option>
            <option value="business">Business & Entrepreneurship</option>
            <option value="health">Health & Wellness</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3
            text-orange-600 dark:text-gray-400
            ">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>

      <!-- Date Range Filter -->
      <div>
        <label for="date-start" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
          Date Range
        </label>
        <div class="flex space-x-4">
          <input type="date" id="date-start" class="w-full px-4 py-2 rounded-xl
            bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
            shadow-md shadow-orange-200/50 dark:shadow-gray-950
            border border-orange-100 dark:border-gray-700
            focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
            neumorphic-inset
            text-orange-900 dark:text-gray-100
            placeholder-orange-400 dark:placeholder-gray-500
            ">
          <input type="date" id="date-end" class="w-full px-4 py-2 rounded-xl
            bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
            shadow-md shadow-orange-200/50 dark:shadow-gray-950
            border border-orange-100 dark:border-gray-700
            focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
            neumorphic-inset
            text-orange-900 dark:text-gray-100
            placeholder-orange-400 dark:placeholder-gray-500
            ">
        </div>
      </div>

      <!-- Location Filter -->
      <div>
        <label for="location" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
          Location
        </label>
        <input type="text" id="location" placeholder="e.g., Virtual, New York, London"
          class="w-full px-4 py-2 rounded-xl
          bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
          shadow-md shadow-orange-200/50 dark:shadow-gray-950
          border border-orange-100 dark:border-gray-700
          focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
          neumorphic-inset
          text-orange-900 dark:text-gray-100
          placeholder-orange-400 dark:placeholder-gray-500
          ">
      </div>

      <!-- Filter Button -->
      <button type="button" class="w-full py-3 rounded-full font-semibold relative overflow-hidden
        bg-gradient-to-r from-orange-500 to-red-500 text-white
        shadow-lg shadow-orange-400/50 dark:shadow-red-700/50
        transition-all duration-300 ease-out
        hover:scale-105 hover:shadow-xl
        active:scale-95 active:shadow-md
        dark:from-orange-600 dark:to-red-600
        group
        ">
        <span class="relative z-10">
          Apply Filters
        </span>
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
      </button>

      <!-- Reset Button -->
      <button type="button" class="w-full py-2 rounded-full font-medium
        text-orange-700 dark:text-orange-300
        bg-transparent
        shadow-none
        transition duration-300 ease-in-out
        hover:text-orange-900 hover:dark:text-orange-100
        hover:underline
        focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
        neumorphic-button-flat
        ">
        Reset Filters
      </button>
    </div>
  </div>
</div>

<style>
  /* Base Neumorphic Inset */
  .neumorphic-inset {
    box-shadow: 
      inset 4px 4px 8px rgba(255, 160, 0, 0.2), /* Light shadow for orange */
      inset -4px -4px 8px rgba(255, 255, 255, 0.7); /* Dark shadow for white */
    transition: all 0.2s ease-in-out;
  }

  .dark .neumorphic-inset {
    box-shadow: 
      inset 4px 4px 8px rgba(0, 0, 0, 0.6),
      inset -4px -4px 8px rgba(70, 70, 70, 0.3);
  }

  /* Focus state for neumorphic inset elements */
  .neumorphic-inset:focus {
    box-shadow: 
      inset 2px 2px 5px rgba(255, 160, 0, 0.3), 
      inset -2px -2px 5px rgba(255, 255, 255, 0.5),
      0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
  }
  .dark .neumorphic-inset:focus {
    box-shadow: 
      inset 2px 2px 5px rgba(0, 0, 0, 0.7),
      inset -2px -2px 5px rgba(70, 70, 70, 0.4),
      0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
  }

  /* Custom styling for select dropdown arrow */
  select.neumorphic-inset {
    background-image: none; /* Remove default arrow */
  }
  select ~ div.pointer-events-none svg {
    fill: currentColor; /* Use text color for arrow */
  }

  .neumorphic-button-flat {
    /* Reset button should look flatter, almost like text, but maintain neumorphic context */
    background-color: transparent; /* No strong background */
    box-shadow: none; /* No strong shadow */
  }
  .neumorphic-button-flat:hover {
    /* Subtle glow or shift on hover if desired, or just underline */
    /* Example: text-shadow: 0 0 5px rgba(255, 160, 0, 0.5); */
  }
</style>