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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Category:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>Art</option>
<option>Photography</option>
<option>Music</option>
<option>Technology</option>
</select>
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
<input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Rating:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>1 Star</option>
<option>2 Stars</option>
<option>3 Stars</option>
<option>4 Stars</option>
<option>5 Stars</option>
</select>
</div>
<div class="flex justify-between">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">John Doe</h4>
<p class="text-gray-600 dark:text-gray-300">Photographer</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-300">Artist</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
<div class="grid grid-cols-1 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
</div>
</div>
</div>Composants associés
Composant Filtres
Un composant de filtres réactifs pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.
Composant Filtres Glassmorphism
Un composant de filtres simple et réactif de style Glassmorphism pour un portefeuille, avec des éléments translucides ressemblant à du verre dépoli avec des effets de flou, des couleurs complémentaires et la prise en charge du mode sombre.
Composant Filtres
Il s’agit d’un composant de filtres complexe et réactif avec un style de conception « Palette forêt/vert » et « Transitions dégradées/couleurs », adapté à un portefeuille. Comprend la prise en charge du mode sombre et des éléments interactifs.