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 simple et réactif pour les médias sociaux avec un style de micro-interactions, une palette de couleurs analogues et une prise en charge du thème sombre.
Composant Filtres
Un composant de filtres complexe et réactif avec des éléments de conception 3D et une palette de couleurs triadique, adapté aux sites de blogs/sites de contenu. Prend en charge le thème sombre.
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.