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.
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
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.
Composant Filtres
Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.
Composant Filtres
Un composant de filtres réactifs conçu dans le style Brutalism avec une palette de couleurs en niveaux de gris pour un paramètre de tableau de bord. Il comprend des options de filtre interactives et prend en charge le thème sombre.