Filtros

Componente de filtros

Un componente de filtros complejo, receptivo y de estilo Glassmorphism con un esquema de color análogo para sitios web comerciales/corporativos. Cuenta con elementos translúcidos y efectos de desenfoque, con soporte completo para el modo oscuro usando Tailwind CSS. No se incluye JavaScript.

Abrir vista previa

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

Componente de filtros

Un componente de filtros minimalista y receptivo para comercio electrónico, con soporte para temas oscuros. Incluye categorías, rango de precios y un filtro de color.

Abrir vista previa

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

Componente de filtros

Un componente de filtro de redes sociales de temática retro/vintage con tonos tierra, diseño simple, diseño responsivo y compatibilidad con el modo oscuro.

Abrir vista previa

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

Componente de filtros

Un componente de filtros responsivo para comercio electrónico que incorpora un estilo de modo oscuro con una combinación de colores en tonos tierra.

Abrir vista previa

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

FiltersComponent

Un componente de filtros receptivo diseñado en estilo Material Design para aplicaciones de comercio electrónico con soporte para temas oscuros. Incluye múltiples elementos interactivos para una experiencia de compra mejorada.

Abrir vista previa

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

FiltrosComponenteNemorfismo

Un componente de filtros responsivos simple con estilo de interfaz de usuario suave Neumorphism, que utiliza un esquema de color en escala de grises, diseñado para sitios web comerciales / corporativos. El componente es compatible con el modo oscuro y está construido con Tailwind CSS sin ningún JavaScript.

Abrir vista previa

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

Componente de filtros

Un componente de filtros diseñado con un estilo esqueuomórfico que imita los controles del mundo real, utilizando un esquema de color en escala de grises, perfecto para paneles con elementos interactivos complejos.

Abrir vista previa

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

Filtros brutalistas

Un componente de filtro simple y brutalista para aplicaciones de redes sociales, con un esquema de color complementario y soporte para modo oscuro.

Abrir vista previa

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

Componente de filtros

Un componente de filtros simple diseñado para un blog o sitio web de consumo de contenido, siguiendo una interfaz de usuario de modo oscuro con un esquema de color monocromático. Cuenta con un diseño responsivo con elementos mínimos.

Abrir vista previa

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

Componente de filtros de glassmorphism

Componente de filtros de glassmorphism para redes sociales con diseño responsivo y soporte de temas oscuros.

Abrir vista previa

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

```

Categorías