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.
Código HTML
<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>Componentes relacionados
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.
Componente de filtros del foro
Un componente de filtros de foro receptivo con una estética de diseño 3D, combinación de colores otoñal y compatibilidad con modo oscuro, adecuado para plataformas comunitarias.
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.