Composant Filtres
Un composant de filtres sophistiqué conçu avec Glassmorphism et une palette de couleurs analogue, adapté à la visualisation des données du tableau de bord avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 p-6 dark:bg-gray-900">
<div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-8 w-full max-w-4xl border border-gray-200 dark:bg-gray-800 dark:bg-opacity-60 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Filters</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="mb-1 text-gray-700 dark:text-gray-300">Category</label>
<select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>Analytics</option>
<option>Marketing</option>
<option>Sales</option>
</select>
</div>
<div class="flex flex-col">
<label class="mb-1 text-gray-700 dark:text-gray-300">Status</label>
<select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
<option>Active</option>
<option>Inactive</option>
<option>Pending</option>
</select>
</div>
<div class="flex flex-col">
<label class="mb-1 text-gray-700 dark:text-gray-300">Date Range</label>
<div class="flex space-x-2">
<input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
<input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
</div>
</div>
<div class="flex flex-col">
<label class="mb-1 text-gray-700 dark:text-gray-300">Search</label>
<input type="text" placeholder="Search..." class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
</div>
</div>
<div class="flex justify-between items-center mt-6">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md dark:bg-blue-500 dark:hover:bg-blue-600">Apply</button>
<button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md dark:bg-gray-600 dark:hover:bg-gray-700">Reset</button>
</div>
</div>
</div>Composants associés
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.
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.
Composant Filtres
Un composant de filtres réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.