Componente Tag Cloud
Un componente Tag Cloud reattivo con colori in scala di grigi e microinterazioni, progettato per le interfacce dei social media con supporto per il tema scuro.
Codice HTML
<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Popular Tags</h2>
</div>
<div class="flex flex-wrap justify-center gap-4">
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#webdevelopment</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#tailwindcss</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#javascript</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#css3</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#html5</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#react</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#vuejs</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#angular</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#nodejs</span>
<span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#python</span>
</div>
</div>Componenti correlati
Componente Tag Cloud
Un complesso componente tag cloud a tema industriale con colori autunnali, progettato per siti Web di agricoltura/allevamento. Presenta più elementi interattivi, reattività completa e supporto per la modalità oscura.
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 di Neumorfismo
Un componente Tag Cloud reattivo con design a neumorfismo, combinazione di colori pastello e interazioni complesse, su misura per l'e-commerce. Include il supporto per la modalità oscura e utilizza Tailwind CSS.