Componente Tag Cloud
Un componente Tag Cloud complesso e reattivo con microinterazioni, progettato per una dashboard, utilizzando una combinazione di colori in scala di grigi. Supporta la modalità oscura.
Codice HTML
<div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Tag Cloud</h2>
<div class="flex flex-wrap gap-3">
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Technology</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Finance</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Healthcare</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Education</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Sports</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Science</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Art</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Travel</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
<div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
<span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Food</span>
<div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
</div>
</div>
</div>Componenti correlati
Componente Tag Cloud
Un componente Tag Cloud progettato con lo stile Neumorfismo, che utilizza una combinazione di colori monocromatici per scopi di e-commerce e supporta il tema scuro con un design reattivo.
Componente Tag Cloud
Un componente Tag Cloud Neumorfico progettato per un portfolio, che mostra tag con una combinazione di colori monocromatica, layout reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente Tag Cloud
Un componente Tag Cloud con stile di design Neumorfismo, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.