Composant Filtres Glassmorphism
Un composant de filtres simple et réactif de style Glassmorphism pour un portefeuille, avec des éléments translucides ressemblant à du verre dépoli avec des effets de flou, des couleurs complémentaires et la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 p-4 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
<div class="w-full max-w-sm mx-auto p-4 md:p-6 lg:p-8 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 shadow-lg dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center dark:text-white drop-shadow-sm">Filter Projects</h2>
<div class="flex flex-wrap gap-3 justify-center mb-6">
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-blue-500 bg-opacity-40 border border-blue-400 text-white shadow-md hover:scale-105 hover:bg-blue-600 hover:bg-opacity-50 dark:bg-blue-700 dark:bg-opacity-40 dark:border-blue-600 dark:hover:bg-blue-800 dark:hover:bg-opacity-50">
All
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Web Design
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
UI/UX
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Branding
</button>
<button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
Mobile App
</button>
</div>
<div class="flex items-center gap-3">
<label for="sort-by" class="sr-only">Sort By</label>
<select id="sort-by" class="flex-grow appearance-none px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:focus:ring-blue-600">
<option value="recent">Sort by: Recent</option>
<option value="popularity">Sort by: Popularity</option>
<option value="alphabetical">Sort by: Alphabetical</option>
</select>
<button aria-label="Apply Filters" class="p-3 rounded-full transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-gradient-to-r from-blue-500 to-indigo-500 bg-opacity-60 border border-opacity-40 border-blue-400 text-white shadow-md hover:scale-110 hover:from-blue-600 hover:to-indigo-600 dark:from-blue-700 dark:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Glassmorphism_EarthTones_SocialMedia_Filters
Il s’agit d’un composant complexe et réactif de filtres pour les réseaux sociaux avec un design glassmorphism, une palette de couleurs terreuse et une prise en charge complète du mode sombre. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, du HTML sémantique et des options de filtre interactif.
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 filtre de médias sociaux à thème rétro/vintage avec des tons de terre, une mise en page simple, un design réactif et une prise en charge du mode sombre.