搜索组件

类别

组件过滤器

过滤器

帮助用户过滤内容的工具

Luxury_Retro_Gaming_Filters

一个简单、优雅且响应迅速的过滤器组件，适用于具有奢华复古美感的游戏网站。具有柔和的复古色彩、精致的排版和深色模式支持。

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

Neumorphic 事件过滤器

一个简单、响应迅速的中性滤镜组件，为活动和会议网站使用暖日落色调，并支持深色模式。

打开预览

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

Filters 组件

一个复杂的响应式过滤器组件，具有“森林/绿色调色板”和“渐变/颜色过渡”设计样式，适用于投资组合。包括深色模式支持和交互元素。

打开预览

                <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

一个复杂的响应式过滤器组件，适用于农业/农业网站，采用包豪斯风格和大地色调设计。包括各种过滤选项，如类别、价格范围、评级和热门标签，并完全支持深色模式。

打开预览

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

Filters 组件

用于仪表板的复杂响应式过滤器组件，采用干净、简约的设计，采用霓虹灯/电色调，支持多种交互元素和深色模式。专为数据可视化和控制面板而设计。

打开预览

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

Forum Filters 组件

响应式论坛过滤器组件具有 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>