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.
Codice HTML
<div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Featured Work</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 1</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 2</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 3</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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 13
Un componente Tag Cloud progettato con lo stile Neumorfismo. Presenta uno stile dell'interfaccia utente morbido con elementi che sembrano estrudere dallo sfondo utilizzando ombre sottili. Il componente supporta il design reattivo e i temi scuri.
Componente Tag Cloud
Un componente tag cloud reattivo con animazioni accattivanti, che utilizza una combinazione di colori monocromatica adatta a un portfolio.