Composant de nuage de balises
Un composant Tag Cloud réactif conçu pour les interfaces de médias sociaux avec une interface utilisateur en mode sombre et une palette de couleurs pastel.
HTML Code
<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>Composants associés
Composant de nuage de balises
Un composant de nuage de balises neumorphiques conçu pour un portfolio, présentant des balises avec un schéma de couleurs monochromatiques, une mise en page réactive et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de nuage de balises
Un composant de nuage de balises 3D avec des couleurs vives pour les tableaux de bord de visualisation de données.
Composant de nuage de balises
Un composant de nuage de balises réactif avec des styles de conception matérielle, une palette de couleurs complémentaire et une complexité modérée à des fins de commerce électronique, avec prise en charge du thème sombre.