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 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.
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.
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.