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 complexe de nuage de balises à thème industriel avec des couleurs d’automne, conçu pour les sites Web agricoles. Dispose de plusieurs éléments interactifs, d’une réactivité totale et d’une prise en charge du mode sombre.
Composant de nuage d’étiquettes aquarelle/artistique
Un composant de nuage de balises complexe et réactif avec un style de conception aquarelle/artistique et une palette de couleurs pastel, adapté aux plateformes de forum/communauté. Prend en charge le mode sombre.
Glassmorphism Tag Cloud Component
Un composant de nuage d’étiquettes de style glassmorphism avec une palette de couleurs violette/violette, adapté aux portfolios. Comprend des éléments translucides givrés, un design réactif et une prise en charge du mode sombre.