検索コンポーネント

カテゴリ

フィルター

ユーザーがコンテンツをフィルタリングするのに役立つツール

Luxury_Retro_Gaming_Filters

シンプルでエレガント、そしてレスポンシブなフィルターコンポーネントで、高級でレトロな美学を備えたゲームWebサイト用です。落ち着いたビンテージカラー、洗練されたタイポグラフィ、ダークモードのサポートが特徴です。

                <div class="font-['Cinzel_Decorative'] bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 max-w-full mx-auto">
  <h2 class="text-2xl sm:text-3xl font-bold text-center mb-6 uppercase tracking-wider text-rose-800 dark:text-rose-400">Game Filters</h2>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Platform Filter -->
    <div class="flex flex-col">
      <label for="platform-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Platform</label>
      <select id="platform-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Platforms</option>
        <option value="pc">PC</option>
        <option value="playstation">PlayStation</option>
        <option value="xbox">Xbox</option>
        <option value="nintendo">Nintendo</option>
      </select>
    </div>

    <!-- Genre Filter -->
    <div class="flex flex-col">
      <label for="genre-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Genre</label>
      <select id="genre-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Genres</option>
        <option value="rpg">RPG</option>
        <option value="action">Action</option>
        <option value="strategy">Strategy</option>
        <option value="adventure">Adventure</option>
        <option value="sports">Sports</option>
      </select>
    </div>

    <!-- Year Filter -->
    <div class="flex flex-col">
      <label for="year-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Year</label>
      <select id="year-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Years</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="older">Older</option>
      </select>
    </div>

    <!-- Price Filter (conceptual, could be 'free', 'paid' or specific range) -->
    <div class="flex flex-col">
      <label for="price-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Price</label>
      <select id="price-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">Any Price</option>
        <option value="free">Free</option>
        <option value="paid">Paid</option>
        <option value="under-20">Under $20</option>
      </select>
    </div>

  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-rose-700 text-rose-100 dark:bg-rose-600 dark:text-rose-100 rounded-md font-bold uppercase tracking-wider shadow-lg hover:bg-rose-800 dark:hover:bg-rose-700 transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      Apply Filters
    </button>
  </div>
</div>

<!-- To use the Cinzel Decorative font, you'd typically include it via Google Fonts in your HTML head: -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet"> -->

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

ダークモードをサポートする、イベントや会議のWebサイト用の温かみのある夕焼けの色調を使用する、シンプルで応答性の高いニューモルフィックフィルターコンポーネント。

開けるプレビュー

                <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>

フィルターコンポーネント

ポートフォリオに適した、「フォレスト/グリーンパレット」と「グラデーション/カラートランジション」のデザインスタイルを備えた、複雑でレスポンシブなフィルターコンポーネント。ダークモードのサポートとインタラクティブな要素が含まれています。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-10 border border-green-200 dark:border-green-700 transition-all duration-500">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-green-800 dark:from-emerald-400 dark:to-green-600 mb-8 sm:mb-10 text-center">
      Browse Our Portfolio
    </h2>

    <!-- Filter Controls Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-10">

      <!-- Category Filter -->
      <div class="relative group">
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Category</label>
        <select id="category" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="all" class="text-gray-700 dark:text-gray-300">All Categories</option>
          <option value="web-design" class="text-gray-700 dark:text-gray-300">Web Design</option>
          <option value="branding" class="text-gray-700 dark:text-gray-300">Branding</option>
          <option value="marketing" class="text-gray-700 dark:text-gray-300">Marketing</option>
          <option value="photography" class="text-gray-700 dark:text-gray-300">Photography</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <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>

      <!-- Sort By Filter -->
      <div class="relative group">
        <label for="sortby" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Sort By</label>
        <select id="sortby" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="newest" class="text-gray-700 dark:text-gray-300">Newest</option>
          <option value="oldest" class="text-gray-700 dark:text-gray-300">Oldest</option>
          <option value="popular" class="text-gray-700 dark:text-gray-300">Most Popular</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <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>

      <!-- Search Input -->
      <div class="relative col-span-full md:col-span-1 lg:col-span-2

Bauhaus_EarthTone_Agriculture_Filters_Component

農業/農業Webサイト用の複雑でレスポンシブなフィルターコンポーネントで、アースカラーのバウハウススタイルで設計されています。カテゴリ、価格帯、評価、人気のあるタグなどのさまざまなフィルタリングオプションが含まれており、ダークモードが完全にサポートされています。

開けるプレビュー

                <div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl font-sans max-w-7xl mx-auto border border-stone-200 dark:border-stone-700">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-stone-900 dark:text-stone-50 border-b-2 border-stone-400 dark:border-stone-600 pb-2">
    Farm Product Filters
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Category Filter -->
    <div class="filter

Glassmorphism_EarthTones_SocialMedia_Filters

ガラスモルフィズムデザイン、アーストーンの配色、および完全なダークモードサポートを備えた、複雑で応答性の高いソーシャルメディアフィルターコンポーネント。ぼかし効果、セマンティックHTML、インタラクティブなフィルターオプションを備えたすりガラスのような半透明の要素を備えています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-300 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8 flex items-start justify-center font-sans">
  <div class="w-full max-w-4xl backdrop-blur-xl bg-white/30 dark:bg-stone-900/40 rounded-3xl shadow-xl border border-white/50 dark:border-stone-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-stone-200/10 to-stone-400/10 dark:from-stone-700/10 dark:to-stone-900/10 rounded-3xl pointer-events-none"></div>
    <div class="relative p-6 sm:p-8 lg:p-10">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 text-center">
        Explore Social Feeds
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
        <!-- Category Filter -->
        <div class="flex flex-col">
          <label for="category-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Category</label>
          <div class="relative">
            <select id="category-filter" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
              <option value="all">All Posts</option>
              <option value="news">News</option>
              <option value="photos">Photos</option>
              <option value="videos">Videos</option>
              <option value="events">Events</option>
              <option value="discussions">Discussions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
              <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>

        <!-- People Filter -->
        <div class="flex flex-col">
          <label for="people-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">From People</label>
          <div class="relative">
            <input type="text" id="people-filter" placeholder="Search by name..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Location Filter -->
        <div class="flex flex-col">
          <label for="location-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Location</label>
          <div class="relative">
            <input type="text" id="location-filter" placeholder="Near me or a city..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 grid grid-cols-2 md:grid-cols-4 gap-4">
        <!-- Date Range Filter -->
        <div class="flex flex-col">
          <label for="date-start" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Start Date</label>
          <input type="date" id="date-start" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
        </div>
        <div class="flex flex-col">
          <label for="date-end" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">End Date</label>
          <input type="date" id="date-end" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
        </div>

        <!-- Sort By Filter -->
        <div class="flex flex-col col-span-2 md:col-span-1">
          <label for="sort-by" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Sort By</label>
          <div class="relative">
            <select id="sort-by" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
              <option value="recent">Most Recent</option>
              <option value="popular">Most Popular</option>
              <option value="relevance">Relevance</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
              <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>

        <!-- Filter Options Checkboxes -->
        <div class="col-span-2 md:col-span-1 flex flex-col pt-2 md:pt-0">
          <span class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Options</span>
          <div class="flex flex-wrap gap-x-4 gap-y-2">
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Followed</span>
            </label>
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Liked</span>
            </label>
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Comments</span>
            </label>
          </div>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 flex flex-col sm:flex-row gap-4 sm:gap-6">
        <button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-white bg-stone-600 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-500/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
          Apply Filters
        </button>
        <button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-stone-800 dark:text-stone-200 bg-white/60 dark:bg-stone-800/60 border border-white/70 dark:border-stone-700/70 hover:bg-white/80 dark:hover:bg-stone-700/80 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-300/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
          Reset Filters
        </button>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Earth_Tones_Filters_Component

適度な複雑さは、レトロ/ビンテージの美学とアースカラーのコンポーネントをフィルタリングし、ダッシュボードに適しています。レスポンシブデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="flex flex-col p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-stone-900 rounded-xl shadow-lg font-mono text-gray-800 dark:text-gray-200 border-2 border-stone-300 dark:border-stone-700">
  <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 border-b-2 border-dashed border-stone-400 dark:border-stone-600 pb-4">
    <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4 sm:mb-0">Dashboard Filters</h2>
    <div class="flex items-center space-x-2">
      <label class="relative inline-flex items-center cursor-pointer">
        <input type="checkbox" value="" class="sr-only peer">
        <div class="w-11 h-6 bg-stone-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-amber-500 rounded-full peer dark:bg-stone-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-amber-600"></div>
        <span class="ml-3 text-sm font-medium text-stone-700 dark:text-stone-300">Dark Mode</span>
      </label>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <!-- Date Range Filter -->
    <div class="flex flex-col">
      <label for="date-range" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Date Range</label>
      <div class="relative">
        <input id="date-range" type="text" placeholder="Select Date Range" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out placeholder-stone-500 dark:placeholder-stone-400"
         onfocus="this.type='date'" onblur="this.type='text'" >
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Category Filter -->
    <div class="flex flex-col">
      <label for="category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Category</label>
      <div class="relative">
        <select id="category" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out appearance-none">
          <option value="">All Categories</option>
          <option value="revenue">Revenue</option>
          <option value="users">Users</option>
          <option value="products">Products</option>
          <option value="marketing">Marketing</option>
        </select>
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10"></path>
          </svg>
        </div>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-500 dark:text-stone-400">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l-.707.707L4.586 9.5l4-.707zM10 12.95l4-4-.707-.707L10 11.586l-2.293-2.293-.707.707L10 12.95z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Status Filter -->
    <div class="flex flex-col">
      <label for="status" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Status</label>
      <div class="relative">
        <select id="status" class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out appearance-none">
          <option value="">All Statuses</option>
          <option value="active">Active</option>
          <option value="pending">Pending</option>
          <option value="completed">Completed</option>
          <option value="archived">Archived</option>
        </select>
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-500 dark:text-stone-400">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l-.707.707L4.586 9.5l4-.707zM10 12.95l4-4-.707-.707L10 11.586l-2.293-2.293-.707.707L10 12.95z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Search Input -->
    <div class="flex flex-col sm:col-span-2 lg:col-span-1">
      <label for="search" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Search</label>
      <div class="relative">
        <input id="search" type="text" placeholder="Search anything..." class="block w-full py-2 px-3 pl-10 text-stone-800 dark:text-stone-200 bg-white dark:bg-stone-800 border border-stone-400 dark:border-stone-600 rounded-md focus:ring-amber-500 focus:border-amber-500 shadow-sm transition-all duration-200 ease-in-out placeholder-stone-500 dark:placeholder-stone-400">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Slider Filter -->
    <div class="flex flex-col sm:col-span-2 lg:col-span-1">
      <label for="value-range" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Value Range: <span id="value-display" class="font-bold text-amber-700 dark:text-amber-400">$50 - $200</span></label>
      <input id="value-range" type="range" min="0" max="500" value="150" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer range-amber-500 dark:bg-stone-700" 
        oninput="document.getElementById('value-display').innerText = '$' + (this.value - 100 < 0 ? 0 : this.value - 100) + ' - $' + this.value">
    </div>

    <!-- User Avatar Filter -->
    <div class="flex flex-col">
      <label for="user-filter" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Assigned To</label>
      <div class="flex items-center space-x-2">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <img class="w-9 h-9 rounded-full border-2 border-stone-400 dark:border-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
        <button class="w-9 h-9 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 flex items-center justify-center border-2 border-stone-400 dark:border-stone-600 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 ease-in-out">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        </button>
      </div>
    </div>

  </div>

  <div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 pt-6 border-t-2 border-dashed border-stone-400 dark:border-stone-600">
    <button class="px-6 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200 ease-in-out border border-stone-400 dark:border-stone-600 font-bold uppercase text-sm tracking-wider">
      Reset Filters
    </button>
    <button class="px-6 py-2 bg-amber-600 text-white rounded-md shadow-lg hover:bg-amber-700 transition-colors duration-200 ease-in-out border-2 border-amber-700 font-bold uppercase text-sm tracking-wider">
      Apply Filters
    </button>
  </div>
</div>

Memphis_Job_Filters

遊び心のあるメンフィスデザインスタイル、トライアドカラースキーム、ダークモードサポートを備えたレスポンシブジョブフィルターコンポーネントで、求人掲示板やキャリアプラットフォームに適しています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-fuchsia-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-fuchsia-600 dark:border-cyan-500 relative">
    <!-- Memphis Design Elements -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-cyan-400 dark:bg-yellow-400 transform rotate-45 z-0 rounded-lg"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-yellow-400 dark:bg-fuchsia-600 transform -rotate-12 z-0 rounded-full opacity-75"></div>
    <div class="absolute top-1/4 left-1/3 w-16 h-16 border-4 border-fuchsia-600 dark:border-cyan-500 rounded-full opacity-50 z-0"></div>

    <div class="p-6 sm:p-8 md:p-10 relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-fuchsia-700 dark:text-cyan-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
        Find Your Dream Job
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
        <!-- Keyword Search -->
        <div class="relative">
          <label for="search-keyword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keyword</label>
          <input type="text" id="search-keyword" placeholder="e.g., Frontend Developer" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
        </div>

        <!-- Location Filter -->
        <div class="relative">
          <label for="search-location" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
          <select id="search-location" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Locations</option>
            <option value="remote">Remote</option>
            <option value="new_york">New York, NY</option>
            <option value="san_francisco">San Francisco, CA</option>
            <option value="london">London, UK</option>
            <option value="berlin">Berlin, DE</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Job Type Filter -->
        <div class="relative">
          <label for="job-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Job Type</label>
          <select id="job-type" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Types</option>
            <option value="full-time">Full-time</option>
            <option value="part-time">Part-time</option>
            <option value="contract">Contract</option>
            <option value="internship">Internship</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Salary Range Filter -->
        <div class="relative">
          <label for="salary-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Salary Range</label>
          <select id="salary-range" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Salary</option>
            <option value="0-50000">$0 - $50,000</option>
            <option value="50000-80000">$50,000 - $80,000</option>
            <option value="80000-120000">$80,000 - $120,000</option>
            <option value="120000-plus">$120,000+</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-fuchsia-700 dark:text-cyan-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Experience Level Filter -->
        <div class="relative">
          <label for="experience-level" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Experience Level</label>
          <select id="experience-level" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Level</option>
            <option value="entry">Entry Level</option>
            <option value="mid">Mid-Senior Level</option>
            <option value="senior">Director / Executive</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Industry Filter -->
        <div class="relative">
          <label for="industry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Industry</label>
          <select id="industry" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Industries</option>
            <option value="tech">Technology</option>
            <option value="healthcare">Healthcare</option>
            <option value="finance">Finance</option>
            <option value="education">Education</option>
            <option value="marketing">Marketing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 border-2 border-fuchsia-800 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:border-cyan-700">
          Apply Filters
        </button>
        <button class="px-8 py-3 rounded-full bg-transparent border-2 border-cyan-500 text-cyan-700 hover:bg-cyan-50 dark:border-yellow-500 dark:text-yellow-400 dark:hover:bg-gray-700 font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95">
          Clear All
        </button>
      </div>

      <!-- Trending Jobs Section - Example Placeholder -->
      <div class="mt-12 pt-8 border-t-2 border-dashed border-fuchsia-300 dark:border-cyan-700">
        <h3 class="text-xl sm:text-2xl font-bold text-fuchsia-700 dark:text-cyan-400 mb-6 text-center">Trending Categories</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Software Engineering
          </div>
          <div class="p-4 rounded-lg bg-yellow-100 dark:bg-gray-700 border-2 border-yellow-400 dark:border-fuchsia-600 text-center font-medium text-yellow-800 dark:text-fuchsia-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            UI/UX Design
          </div>
          <div class="p-4 rounded-lg bg-fuchsia-100 dark:bg-gray-700 border-2 border-fuchsia-400 dark:border-cyan-600 text-center font-medium text-fuchsia-800 dark:text-cyan-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Data Science
          </div>
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Product Management
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

フィルターコンポーネント

ダッシュボード用の複雑でレスポンシブなフィルターコンポーネントで、ネオン/エレクトリックの配色によるすっきりとしたミニマリストデザインが特徴で、複数のインタラクティブ要素とダークモードをサポートします。データの視覚化とコントロールパネル用に設計されています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-lime-400 dark:text-lime-500 tracking-tight">Dashboard Filters</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Search Input -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 relative">
        <label for="search" class="block text-sm font-medium text-blue-600 dark:text-blue-400 mb-2">Search Anything</label>
        <input type="text" id="search" placeholder="Type here to search..." class="w-full px-4 py-3 border border-blue-500 dark:border-blue-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pt-8 pointer-events-none">
          <svg class="h-5 w-5 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <!-- Date Range Picker -->
      <div class="col-span-full lg:col-span-2 xl:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label for="startDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">Start Date</label>
          <input type="date" id="startDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
        <div>
          <label for="endDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">End Date</label>
          <input type="date" id="endDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
      </div>

      <!-- Dropdown Filter 1 -->
      <div>
        <label for="categoryFilter" class="block text-sm font-medium text-lime-600 dark:text-lime-400 mb-2">Category</label>
        <div class="relative">
          <select id="categoryFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-lime-500 dark:border-lime-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-lime-400 dark:focus:ring-lime-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Categories</option>
            <option value="finance">Finance</option>
            <option value="marketing">Marketing</option>
            <option value="operations">Operations</option>
            <option value="hr">HR</option>
            <option value="sales">Sales</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-lime-700 dark:text-lime-500">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Dropdown Filter 2 -->
      <div>
        <label for="statusFilter" class="block text-sm font-medium text-purple-600 dark:text-purple-400 mb-2">Status</label>
        <div class="relative">
          <select id="statusFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-purple-500 dark:border-purple-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Statuses</option>
            <option value="active">Active</option>
            <option value="pending">Pending</option>
            <option value="completed">Completed</option>
            <option value="cancelled">Cancelled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-purple-700 dark:text-purple-500">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Slider Filter (Range) -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2">
        <label for="rangeFilter" class="block text-sm font-medium text-cyan-600 dark:text-cyan-400 mb-2">Value Range <span id="rangeValue" class="font-bold">$100 - $500</span></label>
        <input type="range" id="rangeFilter" min="0" max="1000" value="300" step="100" class="w-full h-2 bg-gradient-to-r from-teal-400 to-cyan-500 dark:from-teal-600 dark:to-cyan-700 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:focus:ring-cyan-500 transition-colors duration-300">
      </div>

      <!-- Checkbox Group -->
      <fieldset class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-orange-500 dark:border-orange-600 transition-colors duration-300">
        <legend class="text-sm font-medium text-orange-600 dark:text-orange-400 mb-3">Options</legend>
        <div class="grid grid-cols-2 gap-y-2 sm:gap-x-4">
          <div class="flex items-center">
            <input id="option1" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option1" class="ml-2 text-gray-800 dark:text-gray-200">Critical Only</label>
          </div>
          <div class="flex items-center">
            <input id="option2" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option2" class="ml-2 text-gray-800 dark:text-gray-200">Hide Completed</label>
          </div>
          <div class="flex items-center">
            <input id="option3" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option3" class="ml-2 text-gray-800 dark:text-gray-200">Show Drafts</label>
          </div>
          <div class="flex items-center">
            <input id="option4" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option4" class="ml-2 text-gray-800 dark:text-gray-200">Archive Inclusive</label>
          </div>
        </div>
      </fieldset>

      <!-- Apply and Reset Buttons -->
      <div class="col-span-full flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 shadow-md transition-all duration-300 transform hover:scale-105">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Apply Filters
          </span>
        </button>
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 shadow-md transition-all duration-300 transform hover:scale-105 border border-gray-400 dark:border-gray-600">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.08V12m-8.982 8l9-9 9 9M7 12l-2-2m0 0L3 6m2 2l4-4" />
            </svg>
            Reset
          </span>
        </button>
      </div>

    </div>
  </div>

  <script>
    // JavaScript for range slider value display (optional, but good for UX)
    document.addEventListener('DOMContentLoaded', function() {
      const rangeFilter = document.getElementById('rangeFilter');
      const rangeValue = document.getElementById('rangeValue');

      if (rangeFilter && rangeValue) {
        rangeFilter.addEventListener('input', function() {
          const value = parseInt(this.value);
          rangeValue.textContent = `$${value} - $${value + 400}`;
        });

        // Set initial value
        const initialValue = parseInt(rangeFilter.value);
        rangeValue.textContent = `$${initialValue} - $${initialValue + 400}`;
      }
    });
  </script>
</div>

フォーラムフィルターコンポーネント

3Dデザインの美学、秋の配色、ダークモードのサポートを備えたレスポンシブフォーラムフィルターコンポーネントで、コミュニティプラットフォームに適しています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <!-- Component Container with 3D Card Effect -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl border-t border-r border-orange-200 dark:border-gray-600
              transform perspective-1000 rotate-x-3 rotate-y-2 translate-z-10
              transition-all duration-500 hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0
              p-6 sm:p-8 lg:p-10 relative overflow-hidden">

    <!-- Background Grain/Texture Overlay -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>

    <div class="relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-brown-800 dark:text-orange-300 mb-6 sm:mb-8 text-center
                 drop-shadow-lg [text-shadow:_2px_2px_4px_rgb(0_0_0_/_0.2)] dark:[text-shadow:_2px_2px_4px_rgb(255_165_0_/_0.2)]">
        Forum Discussions
      </h2>

      <!-- Search Bar -->
      <div class="mb-6 sm:mb-8 relative">
        <input type="text" placeholder="Search discussions..." class="w-full p-3 sm:p-4 pr-12 rounded-xl bg-orange-50 dark:bg-gray-600 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                      focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 focus:border-transparent
                      shadow-inner transition-all duration-300 transform translate-z-5 hover:scale-100.5">
        <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">

        <!-- Category Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="category" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Category</label>
          <select id="category" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Categories</option>
            <option value="general">General Discussion</option>
            <option value="announcements">Announcements</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
            <option value="suggestions">Suggestions</option>
          </select>
        </div>

        <!-- Sort By Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="sort-by" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Sort By</label>
          <select id="sort-by" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="latest">Latest Activity</option>
            <option value="popular">Most Popular</option>
            <option value="newest">Newest Posts</option>
            <option value="oldest">Oldest Posts</option>
          </select>
        </div>

        <!-- Status Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="status" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Status</label>
          <select id="status" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Statuses</option>
            <option value="open">Open</option>
            <option value="resolved">Resolved</option>
            <option value="locked">Locked</option>
          </select>
        </div>

        <!-- Tags Filter (Multi-select style) -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Tags</label>
          <div class="flex flex-wrap gap-2">
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">CSS</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">HTML</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">JavaScript</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">Tailwind</button>
             <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">UI/UX</button>
          </div>
        </div>

      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex justify-end gap-4">
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-red-800 dark:from-red-700 dark:to-red-900 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
          <span class="relative z-10">Reset Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-red-700 dark:bg-red-800 transition-opacity duration-300"></span>
        </button>
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-600 dark:to-orange-800 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          <span class="relative z-10">Apply Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-orange-600 dark:bg-orange-700 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Styles for 3D Perspective -->
  <style>
    .perspective-1000 {
      perspective: 1000px;
    }

    .rotate-x-3 {
      transform: rotateX(3deg);
    }

    .rotate-y-2 {
      transform: rotateY(2deg);
    }

    .translate-z-10 {
      transform: translateZ(10px);
    }

    .translate-z-8 {
      transform: translateZ(8px);
    }

    .translate-z-5 {
      transform: translateZ(5px);
    }

    .translate-z-4 {
      transform: translateZ(4px);
    }

    .translate-z-3 {
      transform: translateZ(3px);
    }

    .translate-z-2 {
      transform: translateZ(2px);
    }

    .translate-z-12 {
        transform: translateZ(12px);
    }

     /* Ensure children maintain 3D context */
    .perspective-1000 > * {
      transform-style: preserve-3d;
    }

    .shadow-lg[class*="transform"]:hover, .shadow-md[class*="transform"]:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c; /* Ensure dark mode body background is set */
        }
    }
  </style>
</div>

RetroMedicalFiltersコンポーネント

ヘルスケアアプリケーション向けのレスポンシブなレトロ/ビンテージスタイルのフィルターコンポーネントで、秋の色とダークモードのサポートが特徴です。これには、カテゴリ、日付範囲、およびステータスの対話型フィルターオプションが含まれています。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 lg:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-amber-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform rotate-z-1 perspective-1000 origin-top-left transition-all duration-500 group relative filter-panel border-4 border-amber-800 dark:border-stone-700">

    <!-- Retro Top Bar -->
    <div class="bg-amber-800 dark:bg-stone-700 p-3 flex items-center justify-between border-b-4 border-amber-900 sticky top-0 z-10 shadow-md">
      <h2 class="text-orange-50 text-xl md:text-2xl font-bold tracking-wide uppercase font-mono drop-shadow-md">Patient Filters</h2>
      <div class="flex space-x-2">
        <div class="w-3 h-3 rounded-full bg-red-400 border border-red-600"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-400 border border-yellow-600"></div>
        <div class="w-3 h-3 rounded-full bg-green-400 border border-green-600"></div>
      </div>
    </div>

    <!-- Main Filter Controls -->
    <div class="p-4 sm:p-6 space-y-6">

      <!-- Search Input -->
      <div class="relative">
        <input type="text" placeholder="Search by patient ID or name..." class="w-full p-3 pl-10 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 placeholder-amber-700 dark:placeholder-stone-500 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-sm shadow-inner transition-all duration-200" aria-label="Search patient">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-amber-700 dark:text-stone-500 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Options Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">

        <!-- Category Filter -->
        <div>
          <label for="category" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Category</label>
          <select id="category" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Category</option>
            <option value="appointments" class="text-stone-800 dark:text-stone-200">Appointments</option>
            <option value="prescriptions" class="text-stone-800 dark:text-stone-200">Prescriptions</option>
            <option value="lab_results" class="text-stone-800 dark:text-stone-200">Lab Results</option>
            <option value="medical_history" class="text-stone-800 dark:text-stone-200">Medical History</option>
            <option value="billing" class="text-stone-800 dark:text-stone-200">Billing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Date Range Filter -->
        <div>
          <label for="date-start" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Date Range</label>
          <div class="flex space-x-2">
            <input type="date" id="date-start" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="Start Date">
            <input type="date" id="date-end" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="End Date">
          </div>
        </div>

        <!-- Status Filter -->
        <div>
          <label for="status" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Status</label>
          <select id="status" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Any Status</option>
            <option value="completed" class="text-stone-800 dark:text-stone-200">Completed</option>
            <option value="pending" class="text-stone-800 dark:text-stone-200">Pending</option>
            <option value="cancelled" class="text-stone-800 dark:text-stone-200">Cancelled</option>
            <option value="scheduled" class="text-stone-800 dark:text-stone-200">Scheduled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Department Filter -->
        <div>
          <label for="department" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Department</label>
          <select id="department" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Department</option>
            <option value="cardiology" class="text-stone-800 dark:text-stone-200">Cardiology</option>
            <option value="pediatrics" class="text-stone-800 dark:text-stone-200">Pediatrics</option>
            <option value="oncology" class="text-stone-800 dark:text-stone-200">Oncology</option>
            <option value="neurology" class="text-stone-800 dark:text-stone-200">Neurology</option>
          </select>
        </div>

        <!-- Gender Filter (Radio Buttons) -->
        <fieldset>
          <legend class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Gender</legend>
          <div class="flex items-center space-x-4 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3">
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="all" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150" checked>
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">All</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="male" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Male</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="female" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Female</span>
            </label>
          </div>
        </fieldset>

        <!-- Has Alerts (Checkbox) -->
        <div class="flex items-center bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3 justify-start md:justify-center">
          <input type="checkbox" id="has-alerts" class="form-checkbox h-5 w-5 text-orange-600 bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-sm focus:ring-2 focus:ring-orange-600 focus:border-orange-600 transition-all duration-150" aria-label="Has Alerts">
          <label for="has-alerts" class="ml-3 text-stone-800 dark:text-stone-200 font-mono text-sm">Patients with Alerts</label>
        </div>

      </div>
    </div>

    <!-- Apply & Reset Buttons -->
    <div class="bg-amber-300 dark:bg-stone-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4 border-t-4 border-amber-800 dark:border-stone-700">
      <button class="w-full sm:w-auto px-6 py-3 bg-orange-600 text-white font-bold uppercase rounded-md text-lg tracking-wider hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 active:bg-orange-800 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Apply Filters
      </button>
      <button class="w-full sm:w-auto px-6 py-3 border-2 border-amber-800 dark:border-stone-600 text-amber-800 dark:text-stone-300 font-bold uppercase rounded-md text-lg tracking-wider hover:bg-amber-400 dark:hover:bg-stone-700 focus:outline-none focus:ring-4 focus:ring-amber-300 active:bg-amber-500 dark:active:bg-stone-600 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Reset Filters
      </button>
    </div>

  </div>
</div>

<style>
/* Basic retro 'monitor' effect for the panel */
.filter-panel {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 0.8s ease-in-out;
}

.filter-panel:hover {
  transform: rotateX(1deg) rotateY(1deg) scale(1.01);
}

/* Custom styles for select arrow */
select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23b57351%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.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%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em;
}

.dark select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23a1a1aa%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.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%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

/* Custom radio/checkbox styles */
input[type='radio']:checked + span::before, input[type='checkbox']:checked + label::before {
    display: none;
}

input[type='radio'] {
    border-radius: 9999px; /* full rounded */
}
input[type='checkbox'] {
    border-radius: 0.125rem; /* small rounded */
}

select option {
  background-color: var(--tw-bg-amber-100, #fefce8);
  color: var(--tw-text-stone-800, #292524);
}

.dark select option {
  background-color: var(--tw-bg-stone-900, #0c0a09);
  color: var(--tw-text-stone-200, #e7e5e4);
}

</style>