Cerca componenti

Categorie

Filtri

Strumenti per aiutare gli utenti a filtrare i contenuti

Componente Filtri

Un componente di filtri complesso e reattivo con uno stile di design "Tavolozza/Verde" e "Transizioni sfumatura/colore", adatto per un portfolio. Include il supporto per la modalità oscura ed elementi interattivi.

Aperto Anteprima

                <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

Un componente di filtro complesso e reattivo per siti Web di agricoltura/allevamento, progettato in stile Bauhaus con toni della terra. Include varie opzioni di filtro come categorie, fascia di prezzo, valutazioni e tag popolari, con supporto completo della modalità oscura.

Aperto Anteprima

                <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

Un componente di filtri per social media complesso e reattivo con un design glassmorphism, una combinazione di colori color terra e un supporto completo per la modalità scura. Presenta elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, HTML semantico e opzioni di filtro interattivo.

Aperto Anteprima

                <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

Un componente filtrante di moderata complessità con un'estetica retrò/vintage e toni della terra, adatto per un cruscotto. Presenta un design reattivo e il supporto per la modalità oscura.

Aperto Anteprima

                <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

Un componente di filtro di lavoro reattivo con uno stile di design Memphis giocoso, una combinazione di colori triadica e il supporto della modalità scura, adatto per bacheche di lavoro e piattaforme di carriera.

Aperto Anteprima

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

Componente Filtri

Un componente di filtri complesso e reattivo per una dashboard, caratterizzato da un design pulito e minimalista con una combinazione di colori neon/elettrico, che supporta più elementi interattivi e la modalità scura. Progettato per la visualizzazione dei dati e i pannelli di controllo.

Aperto Anteprima

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

Componente Filtri Forum

Un componente reattivo per i filtri del forum con un'estetica di design 3D, una combinazione di colori autunnali e il supporto per la modalità oscura, adatto per le piattaforme della community.

Aperto Anteprima

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

RetroMedicalFiltersComponent

Un componente di filtri reattivo in stile retrò/vintage per applicazioni sanitarie, con colori autunnali e supporto per la modalità scura. Include opzioni di filtro interattive per categorie, intervallo di date e stato.

Aperto Anteprima

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

Componente Filtri Glassmorphism

Un componente di filtri in stile Glassmorphism semplice e reattivo per un portafoglio, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, colori complementari e supporto per la modalità scura.

Aperto Anteprima

                <div class="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 p-4 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto p-4 md:p-6 lg:p-8 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 shadow-lg dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50">
    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center dark:text-white drop-shadow-sm">Filter Projects</h2>
    <div class="flex flex-wrap gap-3 justify-center mb-6">
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-blue-500 bg-opacity-40 border border-blue-400 text-white shadow-md hover:scale-105 hover:bg-blue-600 hover:bg-opacity-50 dark:bg-blue-700 dark:bg-opacity-40 dark:border-blue-600 dark:hover:bg-blue-800 dark:hover:bg-opacity-50">
        All
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Web Design
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        UI/UX
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Branding
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Mobile App
      </button>
    </div>
    <div class="flex items-center gap-3">
      <label for="sort-by" class="sr-only">Sort By</label>
      <select id="sort-by" class="flex-grow appearance-none px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:focus:ring-blue-600">
        <option value="recent">Sort by: Recent</option>
        <option value="popularity">Sort by: Popularity</option>
        <option value="alphabetical">Sort by: Alphabetical</option>
      </select>
      <button aria-label="Apply Filters" class="p-3 rounded-full transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-gradient-to-r from-blue-500 to-indigo-500 bg-opacity-60 border border-opacity-40 border-blue-400 text-white shadow-md hover:scale-110 hover:from-blue-600 hover:to-indigo-600 dark:from-blue-700 dark:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
          </svg>
      </button>
    </div>
  </div>
</div>

Componente Filtri

Un componente di filtri reattivo con elementi di progettazione 3D nei toni della terra, adatto per un portfolio, con supporto per temi scuri.

Aperto Anteprima

                <div class="p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Explore My Portfolio</h2>

  <div class="flex flex-wrap justify-center gap-4 mb-12">
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">All Projects</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Web Development</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">UI/UX Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Graphic Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project1/600/400" alt="Project 1" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title One</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A brief description of Project One, showcasing its key features and technologies used. This project demonstrates responsive design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">HTML</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">CSS</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Tailwind CSS</span>
      </div>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project2/600/400" alt="Project 2" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Two</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">This project focuses on a comprehensive UI/UX design approach, user flows, and wireframing for an intuitive experience.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Figma</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Prototyping</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Research</span>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project3/600/400" alt="Project 3" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Three</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">An example of graphic design work including logo creation, branding guidelines, and marketing collateral design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Photoshop</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrator</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Branding</span>
      </div>
    </div>

    <!-- Project Card 4 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project4/600/400" alt="Project 4" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Four</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A web development project featuring a dynamic and interactive frontend built with modern JavaScript frameworks.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">React</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Node.js</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">API Integration</span>
      </div>
    </div>

    <!-- Project Card 5 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project5/600/400" alt="Project 5" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Five</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">UI/UX case study exploring user research, persona creation, and iterative design processes for a mobile application.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">User Research</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Wireframing</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Usability Testing</span>
      </div>
    </div>

    <!-- Project Card 6 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project6/600/400" alt="Project 6" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Six</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A sophisticated graphic design project involving complex illustrations and print media layouts for a magazine.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrations</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">InDesign</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Print Design</span>
      </div>
cv    </div>

  </div>
</div>