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 de nuage de balises rétro/vintage avec des effets réactifs et une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.
Composant de nuage de balises rétro
Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.