Composant Filtres
Un composant de filtres de style skeuomorphe conçu pour les tableaux de bord avec une palette de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
<form class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
<input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
<select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
<option>All</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
<div class="flex items-center">
<label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
<input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
</div>
<button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
</form>
</div>Composants associés
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é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.
Composant Filtres
Un composant de filtres réactifs pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.