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 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
Un composant de filtres réactifs pour le commerce électronique incorporant un style en mode sombre avec une palette de couleurs de tons de terre.
Composant Filtres
Un composant de filtres réactif de style rétro/vintage, prenant en charge le thème sombre avec Tailwind CSS.