Composant Tag Cloud - Marketplace Sepia/Brown Material Design
Un composant de nuage de balises complexe et réactif conçu pour les plateformes de marché, utilisant les principes de Material Design avec des tons sépia/bruns. Comprend des balises interactives, un filtrage par catégorie et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-6 sm:mb-8 text-center">
Explore Marketplace Categories
</h2>
<p class="text-center text-lg text-amber-800 dark:text-stone-300 mb-8 sm:mb-12 max-w-2xl mx-auto">
Discover products and services by browsing our extensive collection of tags and categories. Find exactly what you're looking for with ease.
</p>
<!-- Search and Filter Section -->
<div class="bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl rounded-xl p-4 sm:p-6 mb-8 sm:mb-12 transition-all duration-300 ease-in-out">
<div class="flex flex-col md:flex-row items-center gap-4">
<div class="relative flex-grow w-full md:w-auto">
<input type="text" placeholder="Search for tags..." class="w-full pl-10 pr-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
<svg class="w-5 h-5 text-stone-400 dark:text-stone-500 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<select class="w-full md:w-auto px-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
<option>All Categories</option>
<option>Popular</option>
<option>New Arrivals</option>
<option>Services</option>
<option>Products</option>
</select>
<button class="w-full md:w-auto px-6 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-all duration-300 ease-in-out">
Apply Filter
</button>
</div>
</div>
<!-- Tag Cloud Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Tag Cloud Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Electronics</h3>
<p class="text-sm opacity-90">Gadgets & Devices</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Smartphones</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Computers</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Accessories</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Home Decor</h3>
<p class="text-sm opacity-90">Furniture & Furnishings</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Furniture</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Lighting</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Art</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 3 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Fashion & Apparel</h3>
<p class="text-sm opacity-90">Clothing & Accessories</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Womenswear</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Menswear</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Shoes</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 4 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=4" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Books & Media</h3>
<p class="text-sm opacity-90">Books, Movies, Music</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fiction</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#NonFiction</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Movies</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 5 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=5" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Automotive</h3>
<p class="text-sm opacity-90">Vehicles & Parts</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cars</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Motorcycles</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Parts</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 6 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=6" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Sports & Outdoors</h3>
<p class="text-sm opacity-90">Gear & Activities</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fitness</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Camping</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cycling</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 7 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=7" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Health & Beauty</h3>
<p class="text-sm opacity-90">Wellness & Cosmetics</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Skincare</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Haircare</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Supplements</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
<!-- Tag Cloud Card 8 -->
<div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/400/300?random=8" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Food & Beverages</h3>
<p class="text-sm opacity-90">Groceries & Delicacies</p>
</div>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Organic</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Snacks</span>
<span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Drinks</span>
</div>
<a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">→</span>
</a>
</div>
</div>
</div>
<!-- Pagination Placeholder (for demonstrating complexity) -->
<div class="flex justify-center mt-12 mb-4">
<nav class="inline-flex rounded-md p-2 bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl transition-all duration-300 ease-in-out" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-l-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-amber-500 bg-amber-50 dark:bg-amber-900 text-sm font-medium text-amber-700 dark:text-amber-100 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
2
</a>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-400 bg-stone-50 dark:bg-stone-900 cursor-default">
...
</span>
<a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
9
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-r-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>Composants associés
Composant de nuage de balises
Un composant de nuage de balises conçu avec un style skeuomorphique, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de nuage de balises
Un composant de nuage de balises simple, réactif et dynamique conçu selon les principes du Bauhaus pour les sites Web d’entreprise et d’entreprise, avec des formes géométriques et des couleurs primaires à haute saturation avec prise en charge du mode sombre.
Composant de nuage de balises
Un composant de nuage de balises conçu avec le style Neumorphism en niveaux de gris, adapté aux blogs et à la consommation de contenu, avec des éléments interactifs.