Componente Tag Cloud (modalità scura, pastello)
Un componente tag cloud reattivo con supporto per la modalità scura, che utilizza colori pastello. Adatto per un portafoglio.
Codice HTML
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-center mb-8 dark:text-purple-200">Skills & Interests</h2>
<div class="flex flex-wrap justify-center gap-4">
<span class="bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition duration-300">
Web Development
</span>
<span class="bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-pink-300 dark:hover:bg-pink-600 transition duration-300">
UI/UX Design
</span>
<span class="bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-blue-300 dark:hover:bg-blue-600 transition duration-300">
Data Science
</span>
<span class="bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-green-300 dark:hover:bg-green-600 transition duration-300">
Machine Learning
</span>
<span class="bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-yellow-300 dark:hover:bg-yellow-600 transition duration-300">
Photography
</span>
<span class="bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-indigo-300 dark:hover:bg-indigo-600 transition duration-300">
Gardening
</span>
<span class="bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-red-300 dark:hover:bg-red-600 transition duration-300">
Travel
</span>
<span class="bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-teal-300 dark:hover:bg-teal-600 transition duration-300">
Cooking
</span>
<span class="bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-orange-300 dark:hover:bg-orange-600 transition duration-300">
Reading
</span>
</div>
</div>
</div>Componenti correlati
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.
Componente Tag Cloud - Marketplace Seppia/Brown Material Design
Un componente tag cloud complesso e reattivo progettato per le piattaforme di marketplace, che utilizza i principi del Material Design con toni seppia/marrone. Dispone di tag interattivi, filtro delle categorie e 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.