Componente de nube de etiquetas
Un componente de Tag Cloud receptivo diseñado para interfaces de redes sociales con una interfaz de usuario de modo oscuro y una combinación de colores pastel.
Código 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>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas receptivo con animaciones atractivas, que utiliza un esquema de color monocromático adecuado para un portafolio.
Componente de nube de etiquetas
Un componente de nube de etiquetas receptivo diseñado para la interfaz de usuario del modo oscuro, que muestra una cartera con un esquema de color análogo.
Componente de nube de etiquetas
Un componente de Tag Cloud complejo y receptivo con microinteracciones, diseñado para un panel de control, utilizando un esquema de color en escala de grises. Soporta el modo oscuro.