Componente Tag Cloud
Un componente tag cloud reattivo progettato secondo i principi di Material Design, con una combinazione di colori ad alto contrasto adatta per i cruscotti. Include il supporto per la modalità oscura e l'HTML semantico per l'accessibilità. Gli effetti al passaggio del mouse sono inclusi per l'interattività.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center">
Popular Topics Tag Cloud
</h2>
<div class="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5">
<a href="#" class="inline-block bg-blue-600 dark:bg-blue-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-blue-700 dark:border-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
Analytics
</a>
<a href="#" class="inline-block bg-purple-600 dark:bg-purple-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-purple-700 dark:border-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Data Science
</a>
<a href="#" class="inline-block bg-green-600 dark:bg-green-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-green-700 dark:border-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75">
Machine Learning
</a>
<a href="#" class="inline-block bg-red-600 dark:bg-red-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-red-700 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
Reporting
</a>
<a href="#" class="inline-block bg-yellow-600 dark:bg-yellow-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-yellow-700 dark:border-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
Dashboards
</a>
<a href="#" class="inline-block bg-teal-600 dark:bg-teal-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-teal-700 dark:border-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
Visualization
</a>
<a href="#" class="inline-block bg-indigo-600 dark:bg-indigo-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-indigo-700 dark:border-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
Big Data
</a>
<a href="#" class="inline-block bg-pink-600 dark:bg-pink-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-pink-700 dark:border-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
Forecasting
</a>
<a href="#" class="inline-block bg-orange-600 dark:bg-orange-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-orange-700 dark:border-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Predictive Models
</a>
<a href="#" class="inline-block bg-cyan-600 dark:bg-cyan-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-cyan-700 dark:border-cyan-800 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
KPIs
</a>
<a href="#" class="inline-block bg-fuchsia-600 dark:bg-fuchsia-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-fuchsia-700 dark:border-fuchsia-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-opacity-75">
Real-time Data
</a>
<a href="#" class="inline-block bg-lime-600 dark:bg-lime-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-lime-700 dark:border-lime-800 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
Cloud Computing
</a>
</div>
</div>
</div>Componenti correlati
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 progettato con stile Neumorfismo in scala di grigi, adatto per blog e consumo di contenuti, caratterizzato da elementi interattivi.
Componente Tag Cloud
Un componente tag cloud progettato con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.