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
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.
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.
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.