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.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
<form class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
<input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
<select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark: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 for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
<input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
</div>
<button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
</form>
</div>Componentes relacionados
Componente de filtros
Un componente de filtros diseñado con un estilo skeuomórfico, con efectos responsivos y compatibilidad con temas oscuros. Este componente utiliza Tailwind CSS para el estilo e incluye imágenes y avatares de marcador de posición aleatorios.
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.
Componente de filtros de glassmorphism
Componente de filtros de glassmorphism para redes sociales con diseño responsivo y soporte de temas oscuros.