Componente de filtros
Un componente de filtro minimalista con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
<div class="flex flex-col space-y-2">
<div class="flex items-center justify-between">
<label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
<select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="all">All</option>
<option value="electronics">Electronics</option>
<option value="books">Books</option>
<option value="clothing">Clothing</option>
</select>
</div>
<div class="flex items-center justify-between">
<label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
<input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
</div>
<div class="flex items-center justify-between">
<label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
<select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="newest">Newest</option>
<option value="price-low-high">Price: Low to High</option>
<option value="price-high-low">Price: High to Low</option>
</select>
</div>
</div>
<button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</div>Componentes relacionados
Filtros de eventos neumórficos
Un componente de filtro neumórfico simple y sensible que utiliza tonos cálidos al atardecer para sitios web de eventos y conferencias, con soporte para modo oscuro.
Componente de filtros
Un componente de filtros responsivo con elementos de diseño 3D en tonos tierra, adecuado para un portafolio, con soporte para temas oscuros.
Componente de filtros
Un componente de filtros de estilo esqueuomórfico diseñado para paneles con un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.