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
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.
Composant Filtres
Composant de filtres simple conçu pour un blog ou un site Web de consommation de contenu, suivant une interface utilisateur en mode sombre avec un schéma de couleurs monochromatique. Il présente une mise en page réactive avec un minimum d’éléments.
Composant Filtres
Un composant de filtres brutalistes avec Tailwind CSS, avec un design réactif, la prise en charge des thèmes sombres et des espaces réservés pour les images et les avatars.