Componente Tag Cloud
Modalità scura Tag Cloud Component
Codice HTML
<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-6 text-amber-600 dark:text-amber-400">Popular Product Tags</h2>
<div class="flex flex-wrap gap-3">
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Electronics</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Home Goods</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Apparel</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Books</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Sports & Outdoors</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Beauty</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Toys</a>
<a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Automotive</a>
</div>
</div>
</div>Componenti correlati
Componente Tag Cloud
Un componente tag cloud progettato con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Tag Cloud
Un componente Tag Cloud reattivo progettato per l'interfaccia utente in modalità scura, che mostra un portfolio con una combinazione di colori analoga.
Componente Tag Cloud
Un componente tag cloud monospace ispirato al codice per siti Web di giochi con colori ad alto contrasto e supporto della modalità scura. Presenta un'estetica simile a un terminale con tag interattivi.