Componente Tag Cloud
Un componente Tag Cloud reattivo con stili di Material Design, una combinazione di colori complementari e una complessità moderata per l'e-commerce, con supporto per temi scuri.
Codice HTML
<div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-4 dark:text-white text-gray-800">Popular Tags</h2>
<div class="flex flex-wrap gap-3">
<!-- Tag Item 1 -->
<a href="#" class="dark:bg-purple-700 dark:text-purple-100 bg-indigo-500 text-indigo-50 px-4 py-2 rounded-full hover:bg-indigo-600 dark:hover:bg-purple-800 transition duration-300 shadow-md text-sm">
Electronics
</a>
<!-- Tag Item 2 -->
<a href="#" class="dark:bg-teal-700 dark:text-teal-100 bg-green-500 text-green-50 px-4 py-2 rounded-full hover:bg-green-600 dark:hover:bg-teal-800 transition duration-300 shadow-md text-sm">
Apparel
</a>
<!-- Tag Item 3 -->
<a href="#" class="dark:bg-orange-700 dark:text-orange-100 bg-red-500 text-red-50 px-4 py-2 rounded-full hover:bg-red-600 dark:hover:bg-orange-800 transition duration-300 shadow-md text-sm">
Home Goods
</a>
<!-- Tag Item 4 -->
<a href="#" class="dark:bg-blue-700 dark:text-blue-100 bg-blue-500 text-blue-50 px-4 py-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 shadow-md text-sm">
Books
</a>
<!-- Tag Item 5 -->
<a href="#" class="dark:bg-red-700 dark:text-red-100 bg-pink-500 text-pink-50 px-4 py-2 rounded-full hover:bg-pink-600 dark:hover:bg-red-800 transition duration-300 shadow-md text-sm">
Sporting Goods
</a>
<!-- Tag Item 6 -->
<a href="#" class="dark:bg-lime-700 dark:text-lime-100 bg-yellow-500 text-yellow-50 px-4 py-2 rounded-full hover:bg-yellow-600 dark:hover:bg-lime-800 transition duration-300 shadow-md text-sm">
Outdoors
</a>
<!-- Tag Item 7 -->
<a href="#" class="dark:bg-cyan-700 dark:text-cyan-100 bg-teal-500 text-teal-50 px-4 py-2 rounded-full hover:bg-teal-600 dark:hover:bg-cyan-800 transition duration-300 shadow-md text-sm">
Kitchen
</a>
<!-- Tag Item 8 -->
<a href="#" class="dark:bg-fuchsia-700 dark:text-fuchsia-100 bg-purple-500 text-purple-50 px-4 py-2 rounded-full hover:bg-purple-600 dark:hover:bg-fuchsia-800 transition duration-300 shadow-md text-sm">
Toys
</a>
<!-- Tag Item 9 -->
<a href="#" class="dark:bg-emerald-700 dark:text-emerald-100 bg-green-600 text-green-50 px-4 py-2 rounded-full hover:bg-green-700 dark:hover:bg-emerald-800 transition duration-300 shadow-md text-sm">
Gaming
</a>
<!-- Tag Item 10 -->
<a href="#" class="dark:bg-rose-700 dark:text-rose-100 bg-red-600 text-red-50 px-4 py-2 rounded-full hover:bg-red-700 dark:hover:bg-rose-800 transition duration-300 shadow-md text-sm">
Automotive
</a>
</div>
</div>
Componenti correlati
Componente Tag Cloud 13
Un componente Tag Cloud progettato con lo stile Neumorfismo. Presenta uno stile dell'interfaccia utente morbido con elementi che sembrano estrudere dallo sfondo utilizzando ombre sottili. Il componente supporta il design reattivo e i temi scuri.
Tag Cloud Componente Glassmorphism Monocromatico Complesso E-commerce
Componente Tag Cloud di Glassmorphism per l'e-commerce
Componente Tag Cloud
Un componente tag cloud semplice, reattivo e vivace, progettato secondo i principi Bauhaus per siti Web aziendali e aziendali, caratterizzato da forme geometriche e colori primari ad alta saturazione con supporto della modalità scura.