Componentes Filtros Componente de filtros

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.

Vista previa

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 receptivo diseñado para la interfaz de usuario del modo oscuro con Tailwind CSS. Incluye opciones para filtrar contenido, usa fondos oscuros y ahorra batería.

Abrir

Filtros brutalistas

Un componente de filtro simple y brutalista para aplicaciones de redes sociales, con un esquema de color complementario y soporte para modo oscuro.

Abrir

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.

Abrir