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
Luxury_Retro_Gaming_Filters
Un composant de filtre simple, élégant et réactif pour les sites Web de jeux à l’esthétique rétro luxueuse. Dispose de couleurs vintage sourdes, d’une typographie sophistiquée et d’une prise en charge du mode sombre.
Filtres d’événements neumorphes
Un composant de filtre neumorphe simple et réactif utilisant des tons chauds de coucher de soleil pour les sites Web d’événements et de conférences, avec prise en charge du mode sombre.
Composant Filtres
Un composant de filtres réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.