Composant Filtres
Un composant de filtre minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
<div class="flex flex-col space-y-2">
<div class="flex items-center justify-between">
<label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
<select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="all">All</option>
<option value="electronics">Electronics</option>
<option value="books">Books</option>
<option value="clothing">Clothing</option>
</select>
</div>
<div class="flex items-center justify-between">
<label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
<input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
</div>
<div class="flex items-center justify-between">
<label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
<select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<option value="newest">Newest</option>
<option value="price-low-high">Price: Low to High</option>
<option value="price-high-low">Price: High to Low</option>
</select>
</div>
</div>
<button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</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.
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 complexe et réactif pour un tableau de bord, doté d’un design épuré et minimaliste avec une palette de couleurs néon/électrique, prenant en charge plusieurs éléments interactifs et le mode sombre. Conçu pour la visualisation de données et les panneaux de contrôle.