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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-white mb-4">Filters</h2>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
<input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
<input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
<input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
<select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
<option class="bg-gray-700 dark:bg-gray-800">All</option>
<option class="bg-gray-700 dark:bg-gray-800">Active</option>
<option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
<select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
<option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
<option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
<option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
</select>
</div>
</div>
<button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>Composants associés
Composant Filtres
Un composant de filtres réactifs conçu avec des micro-interactions et optimisé pour la prise en charge des thèmes sombres.
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.
BrutalistesFiltres
Un composant de filtre simple et brutaliste pour les applications de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du mode sombre.