Componente Tag Cloud
Un componente Tag Cloud reattivo progettato per le interfacce dei social media con un'interfaccia utente in modalità scura e una combinazione di colori pastello.
Codice HTML
<div class="bg-gray-900 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold mb-4">Explore Tags</h2>
<div class="flex flex-wrap">
<span class="bg-pink-300 text-gray-900 hover:bg-pink-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#WebDevelopment</span>
<span class="bg-blue-300 text-gray-900 hover:bg-blue-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#ReactJS</span>
<span class="bg-green-300 text-gray-900 hover:bg-green-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#TailwindCSS</span>
<span class="bg-yellow-300 text-gray-900 hover:bg-yellow-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#JavaScript</span>
<span class="bg-purple-300 text-gray-900 hover:bg-purple-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#CSS</span>
<span class="bg-red-300 text-gray-900 hover:bg-red-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#Frontend</span>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold mb-2">Popular Users</h3>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="ml-3 text-lg">Jane Doe</span>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="ml-3 text-lg">John Smith</span>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<span class="ml-3 text-lg">Alice Johnson</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-xl font-semibold mb-2">Featured Posts</h3>
<img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/300" alt="Featured Post">
<img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/301" alt="Featured Post">
<img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/302" alt="Featured Post">
</div>
</div>Componenti correlati
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.
Componente Tag Cloud
Un componente tag cloud progettato con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Tag Cloud
Un componente Tag Cloud con stile di design Neumorfismo, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.