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 con un design monospace/developer, combinazione di colori neon/elettrico e supporto per la modalità scura, adatto per piattaforme di intrattenimento/multimediali.
Componente Tag Cloud Bauhaus
Un componente tag cloud complesso e reattivo con un design ispirato al Bauhaus, che utilizza neutri freddi, adatto per piattaforme educative con supporto per la modalità oscura.
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.