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.
HTML Code
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
<label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
<label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
<label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
</div>
</div>
<div class="mt-6">
<button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
</div>
<div class="flex justify-between items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</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.
Composant Filtres
Un composant de filtres conçu avec un style skeuomorphe imitant les commandes du monde réel, utilisant une palette de couleurs en niveaux de gris, parfait pour les tableaux de bord avec des éléments interactifs complexes.
Composant Filtres
Un composant de filtres simple et réactif pour les médias sociaux avec un style de micro-interactions, une palette de couleurs analogues et une prise en charge du thème sombre.