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.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out" />
</div>
<div class="relative">
<select class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out">
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Apply</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-150 ease-in-out">Reset</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 1</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 2</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Filtres
Un composant de filtre minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Filtres
Un composant de filtres complexe, réactif, de style Glassmorphism avec une palette de couleurs analogue pour les sites Web d’entreprise. Comprend des éléments translucides et des effets de flou, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.