Composants Filtres Composant Filtres

Composant Filtres

Un composant de filtres réactif conçu avec un style glassmorphism, avec des couleurs pastel et une prise en charge du mode sombre, destiné aux sites Web d’entreprise.

Aperçu

HTML Code

<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>

Composants associés

Composant Filtres

Un composant de filtres réactif avec des micro-interactions, des animations attrayantes et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.

Ouvrir

Composant Filtres

Composant de filtres simple conçu pour un blog ou un site Web de consommation de contenu, suivant une interface utilisateur en mode sombre avec un schéma de couleurs monochromatique. Il présente une mise en page réactive avec un minimum d’éléments.

Ouvrir

FiltresComposant

Un composant de filtres réactif conçu dans le style Material Design pour les applications de commerce électronique avec une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs pour une expérience d’achat améliorée.

Ouvrir