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.
Código HTML
<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>Componentes relacionados
Componente de filtros de glassmorphism
Componente de filtros de glassmorphism para redes sociales con diseño responsivo y soporte de temas oscuros.
Glassmorphism_EarthTones_SocialMedia_Filters
Un componente de filtros de redes sociales complejo y receptivo con un diseño de morfismo de vidrio, combinación de colores en tonos tierra y compatibilidad total con el modo oscuro. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, HTML semántico y opciones de filtro interactivo.
Componente de filtros
Un componente de filtros complejo y receptivo para un tablero, con un diseño limpio y minimalista con un esquema de color neón/eléctrico, que admite múltiples elementos interactivos y modo oscuro. Diseñado para visualización de datos y paneles de control.