Componente Tag Cloud
Un componente tag cloud progettato con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-2">
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Web Development</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Design</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">SEO</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Marketing</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Programming</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Networking</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Cloud Computing</a>
<a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Data Science</a>
</div>
</div>Componenti correlati
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.
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.
Componente Tag Cloud retrò
Un componente Tag Cloud reattivo che utilizza Tailwind CSS, con un'estetica di design retrò / vintage, combinazione di colori pastello e complessità semplice. Adatto per un portfolio, incluso il supporto della modalità scura.