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
FiltresComposantNeumorphisme
Un composant de filtres réactifs simple stylisé avec l’interface utilisateur logicielle Neumorphism, utilisant un schéma de couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Le composant prend en charge le mode sombre et est construit avec Tailwind CSS sans aucun JavaScript.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Ce composant utilise Tailwind CSS pour le style et inclut des images et des avatars aléatoires.
Composant Filtres
Un composant de filtres minimaliste et réactif pour le commerce électronique, avec prise en charge du thème sombre. Il comprend des catégories, une gamme de prix et un filtre de couleur.