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 Glassmorphism
Glassmorphism Filters Component pour les médias sociaux avec un design réactif et la prise en charge du thème sombre.
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.
Retro_Vintage_Earth_Tones_Filters_Component
Un composant de filtres de complexité modérée avec une esthétique rétro/vintage et des tons de terre, adapté à un tableau de bord. Dispose d’un design réactif et d’une prise en charge du mode sombre.