Composant Filtres
Un composant de filtres complexe et réactif avec des éléments de conception 3D et une palette de couleurs triadique, adapté aux sites de blogs/sites de contenu. Prend en charge le thème sombre.
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3>
<div class="space-y-3">
<label class="flex items-center text-gray-600 dark:text-gray-300">
<input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400">
Technology
</label>
<label class="flex items-center text-gray-600 dark:text-gray-300">
<input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400">
Travel
</label>
<label class="flex items-center text-gray-600 dark:text-gray-300">
<input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400">
Food
</label>
<label class="flex items-center text-gray-600 dark:text-gray-300">
<input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400">
Lifestyle
</label>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span>
<span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span>
<span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span>
<span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3>
<div class="space-y-4">
<div>
<label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label>
<input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div>
<label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label>
<input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button>
</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éactif avec des micro-interactions, des animations attrayantes et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
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.