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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-xl font-semibold mb-4">Filters</h2>
<div class="flex flex-col md:flex-row md:space-x-4 mb-4">
<input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
<select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
<option value="">Select Category</option>
<option value="category1">Category 1</option>
<option value="category2">Category 2</option>
</select>
<button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 1</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 2</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 3</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
</div>
</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éactif avec des micro-interactions, des animations attrayantes et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.