Componente de filtros
Un componente de filtros receptivo diseñado con un estilo de cristal, con colores pastel y soporte para modo oscuro, dirigido a sitios web comerciales / corporativos.
Código HTML
<div class="container mx-auto p-6">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filter Options</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
<select id="category" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>All</option>
<option>Consulting</option>
<option>Marketing</option>
<option>Development</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="location">Location</label>
<select id="location" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>Worldwide</option>
<option>Remote</option>
<option>On-site</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="date">Date</label>
<input type="date" id="date" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="price">Price</label>
<input type="text" id="price" placeholder="Max Price" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
</div>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500">Apply Filters</button>
</div>
</div>
Componentes relacionados
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.
Componente de filtros de glassmorphism
Un componente de filtros de estilo Glassmorphism simple y receptivo para una cartera, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, colores complementarios y compatibilidad con el modo oscuro.
Componente de filtros
Un componente de filtro minimalista con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.