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.
HTML Code
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold mb-4">Filter Products</h2>
<div class="mb-4">
<label class="block mb-2 font-medium">Category</label>
<select class="bg-gray-800 text-white border border-gray-700 rounded p-2">
<option>All Categories</option>
<option>Electronics</option>
<option>Fashion</option>
<option>Home & Garden</option>
<option>Sports</option>
</select>
</div>
<div class="mb-4">
<label class="block mb-2 font-medium">Price Range</label>
<input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded appearance-none focus:outline-none">
</div>
<div class="mb-4">
<label class="block mb-2 font-medium">Brand</label>
<div class="flex flex-wrap">
<div class="flex items-center mr-4">
<input type="checkbox" id="brand1" class="mr-2">
<label for="brand1" class="text-gray-300">Brand A</label>
</div>
<div class="flex items-center mr-4">
<input type="checkbox" id="brand2" class="mr-2">
<label for="brand2" class="text-gray-300">Brand B</label>
</div>
<div class="flex items-center mr-4">
<input type="checkbox" id="brand3" class="mr-2">
<label for="brand3" class="text-gray-300">Brand C</label>
</div>
</div>
</div>
<button class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Apply Filters</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 1</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$25.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 2</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$30.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold">Product Name 3</h3>
<p class="text-gray-400">Description of the product goes here.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-green-500 font-bold">$15.00</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
</div>
</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 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 réactifs conçu avec des micro-interactions et optimisé pour la prise en charge des thèmes sombres.