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
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.
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.
Retro_Vintage_Earth_Tones_Filters_Component
Un composant de filtres de complexité modérée avec une esthétique rétro/vintage et des tons de terre, adapté à un tableau de bord. Dispose d’un design réactif et d’une prise en charge du mode sombre.