Composant de nuage de balises
Un composant de nuage de balises réactif conçu pour l’interface utilisateur en mode sombre, présentant un portefeuille avec une palette de couleurs analogue.
HTML Code
<div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Featured Work</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 1</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 2</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 3</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
</div>
</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 Nuage de balises (mode sombre, pastel)
Un composant de nuage de balises réactif avec prise en charge du mode sombre, utilisant des couleurs pastel. Convient pour un portefeuille.
Composant de nuage de balises
Un composant de nuage de balises conçu avec le style Neumorphism en niveaux de gris, adapté aux blogs et à la consommation de contenu, avec des éléments interactifs.