Filtres

Composant Filtres

Un composant de filtres complexe, réactif, de style Glassmorphism avec une palette de couleurs analogue pour les sites Web d’entreprise. Comprend des éléments translucides et des effets de flou, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.

Ouvrir l’aperçu

                <div class="2xl:container 2xl:mx-auto">
  <div class="py-12 px-4">
    <div class="lg:flex justify-between">
      <div class="lg:w-4/12">
        <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
        <div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
          <input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="10" cy="10" r="7"></circle>
            <line x1="21" y1="21" x2="15" y2="15"></line>
          </svg>
        </div>
        <div class="mt-10">
          <div class="flex flex-col space-y-4">
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">All Categories</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Electronics</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Fashion</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Home & Kitchen</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Books</span>
            </label>
          </div>
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
        <div class="flex items-center justify-between mt-4">
          <input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
          <input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
        <div class="flex flex-col space-y-4 mt-4">
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">5 Stars</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">4 Stars & Up</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">3 Stars & Up</span>
          </label>
        </div>
        <button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
        <button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
      </div>
      <div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
        <div class="flex items-center justify-between">
          <p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
          <div class="flex items-center space-x-2">
            <select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
              <option value="popularity">Sort by Popularity</option>
              <option value="price_asc">Price: Low to High</option>
              <option value="price_desc">Price: High to Low</option>
            </select>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
          <!-- Product Card 1 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                New
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 2 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 3 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 4 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                Sale
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 5 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 6 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 7 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 8 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 9 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 10 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 11 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 12 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-center mt-8">
          <nav aria-label="Pagination">
            <ul class="flex">
              <li>
                <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Filtres

Un composant de filtres minimaliste et réactif pour le commerce électronique, avec prise en charge du thème sombre. Il comprend des catégories, une gamme de prix et un filtre de couleur.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

Composant Filtres

Un composant de filtre de médias sociaux à thème rétro/vintage avec des tons de terre, une mise en page simple, un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 md:p-8 font-serif">

  <!-- Retro/Vintage Filters Section -->
  <div class="bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg p-6 mb-8 border-4 border-amber-800 dark:border-amber-200 transform -rotate-2">
    <h2 class="text-2xl md:text-3xl font-bold text-amber-800 dark:text-amber-200 mb-4 text-center uppercase tracking-wide">Vintage Filters</h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      <!-- Filter 1 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage1/200/200" alt="Vintage Filter 1" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Sepia</p>
      </div>

      <!-- Filter 2 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage2/200/200" alt="Vintage Filter 2" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Grayscale</p>
      </div>

      <!-- Filter 3 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage3/200/200" alt="Vintage Filter 3" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Lomo</p>
      </div>

      <!-- Filter 4 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage4/200/200" alt="Vintage Filter 4" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Noir</p>
      </div>

      <!-- Filter 5 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage5/200/200" alt="Vintage Filter 5" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Retro</p>
      </div>
    </div>
  </div>

  <!-- Simple Adjustments Section -->
  <div class="bg-lime-100 dark:bg-lime-900 rounded-lg shadow-lg p-6 border-4 border-lime-800 dark:border-lime-200 transform rotate-1">
    <h2 class="text-2xl md:text-3xl font-bold text-lime-800 dark:text-lime-200 mb-4 text-center uppercase tracking-wide">Basic Adjustments</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Adjustment 1 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="brightness" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Brightness:</label>
        <input type="range" id="brightness" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>

      <!-- Adjustment 2 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="contrast" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Contrast:</label>
        <input type="range" id="contrast" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>
    </div>
  </div>

</div>

Composant Filtres

Un composant de filtres réactifs pour le commerce électronique incorporant un style en mode sombre avec une palette de couleurs de tons de terre.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Filter Products</h2>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Category</label>
        <select class="bg-gray-800 text-white border border-gray-700 rounded p-2">
            <option>All Categories</option>
            <option>Electronics</option>
            <option>Fashion</option>
            <option>Home & Garden</option>
            <option>Sports</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Price Range</label>
        <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded appearance-none focus:outline-none">
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Brand</label>
        <div class="flex flex-wrap">
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand1" class="mr-2">
                <label for="brand1" class="text-gray-300">Brand A</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand2" class="mr-2">
                <label for="brand2" class="text-gray-300">Brand B</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand3" class="mr-2">
                <label for="brand3" class="text-gray-300">Brand C</label>
            </div>
        </div>
    </div>
    <button class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Apply Filters</button>
</div>





<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 1</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$25.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 2</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$30.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 3</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$15.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

FiltresComposant

Un composant de filtres réactif conçu dans le style Material Design pour les applications de commerce électronique avec une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs pour une expérience d’achat améliorée.

Ouvrir l’aperçu

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
                <li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
                <li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
                <li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
            <input type="range" class="w-full" min="0" max="1000" step="10" value="500">
            <div class="flex justify-between text-gray-700 dark:text-gray-300">
                <span>$0</span>
                <span>$1000</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
                <li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
                <li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
            <ul class="mt-2">
                <li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
                <li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
                <li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
            </ul>
        </div>
    </div>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>

FiltresComposantNeumorphisme

Un composant de filtres réactifs simple stylisé avec l’interface utilisateur logicielle Neumorphism, utilisant un schéma de couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Le composant prend en charge le mode sombre et est construit avec Tailwind CSS sans aucun JavaScript.

Ouvrir l’aperçu

                <!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
  aria-label="Filter section"
  class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
  <!-- Search Input -->
  <div class="flex-1">
    <label for="filter-search" class="sr-only">Search</label>
    <input
      type="text"
      id="filter-search"
      placeholder="Search..."
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    />
  </div>
  <!-- Category Select -->
  <div class="flex-1">
    <label for="filter-category" class="sr-only">Category</label>
    <select
      id="filter-category"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Categories</option>
      <option>Marketing</option>
      <option>Finance</option>
      <option>HR</option>
    </select>
  </div>
  <!-- Status Select -->
  <div class="flex-1">
    <label for="filter-status" class="sr-only">Status</label>
    <select
      id="filter-status"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Status</option>
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <!-- Apply Button -->
  <div>
    <button
      type="button"
      class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      Apply Filters
    </button>
  </div>
</section>

Composant Filtres

Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.

Ouvrir l’aperçu

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
            <input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600  rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
            <input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
            <select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
            <div class="flex items-center space-x-4 w-2/3">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
                </label>
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
                </label>
            </div>
        </div>
        <button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
    </div>
</div>

BrutalistesFiltres

Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-2 border-black dark:border-white p-4">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4 md:mb-0">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white font-bold border-2 border-black dark:border-white hover:bg-blue-700 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-700 transition duration-300">Latest</button>
      <button class="px-4 py-2 bg-red-500 text-white font-bold border-2 border-black dark:border-white hover:bg-red-700 dark:bg-green-500 dark:text-black dark:hover:bg-green-700 transition duration-300">Popular</button>
      <button class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black dark:border-white hover:bg-green-700 dark:bg-red-500 dark:text-black dark:hover:bg-red-700 transition duration-300">Friends</button>
      <button class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black dark:border-white hover:bg-yellow-700 dark:bg-blue-500 dark:text-black dark:hover:bg-blue-700 transition duration-300">Following</button>
    </div>
  </div>
</div>

Composant Filtres

Composant de filtres simple conçu pour un blog ou un site Web de consommation de contenu, suivant une interface utilisateur en mode sombre avec un schéma de couleurs monochromatique. Il présente une mise en page réactive avec un minimum d’éléments.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
    <div class="mb-4">
        <label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
        <select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>Technology</option>
            <option>Health</option>
            <option>Lifestyle</option>
            <option>Travel</option>
        </select>
    </div>
    <div class="mb-4">
        <label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
        <select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>John Doe</option>
            <option>Jane Smith</option>
            <option>Chris Johnson</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="text-gray-300 dark:text-gray-400">Sort By</label>
        <div class="flex space-x-4 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
                <span class="ml-2 text-white">Latest</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
                <span class="ml-2 text-white">Popular</span>
            </label>
        </div>
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">Apply Filters</button>
</div>

Composant Filtres Glassmorphism

Glassmorphism Filters Component pour les médias sociaux avec un design réactif et la prise en charge du thème sombre.

Ouvrir l’aperçu

                ```html
<div class="flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-sm md:max-w-md lg:max-w-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="space-y-4">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <select id="category" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>All</option>
          <option>Photos</option>
          <option>Videos</option>
          <option>Articles</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
        <select id="sort" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>Newest</option>
          <option>Popular</option>
          <option>Trending</option>
        </select>
      </div>
      <div>
        <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range</label>
        <input type="date" id="date" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
        <div class="mt-2 flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">#travel</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">#food</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">#nature</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">#technology</span>
        </div>
      </div>
      <div class="flex items-center">
        <input id="darkMode" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
        <label for="darkMode" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Enable Dark Mode</label>
      </div>
    </div>
    <div class="mt-6">
      <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-500">
        Apply Filters
      </button>
    </div>
  </div>
</div>

```

Catégories