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 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 de glassmorphism
Componente de filtros de glassmorphism para redes sociales con diseño responsivo y soporte de temas oscuros.
FiltersComponent
Un componente de filtros receptivo diseñado en estilo Material Design para aplicaciones de comercio electrónico con soporte para temas oscuros. Incluye múltiples elementos interactivos para una experiencia de compra mejorada.