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 neumórficas diseñado para una cartera, que muestra etiquetas con un esquema de color monocromático, un diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de nube de etiquetas
Un componente de nube de etiquetas diseñado con un estilo skeuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Etiqueta: Nube, Componente, Vidrio, Morfismo, Monocromático, Complejo, Comercio electrónico
Componente de nube de etiquetas de Glassmorphism para comercio electrónico