Composant de nuage de balises
Un composant de nuage de balises simple, réactif et dynamique conçu selon les principes du Bauhaus pour les sites Web d’entreprise et d’entreprise, avec des formes géométriques et des couleurs primaires à haute saturation avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
<div class="max-w-4xl mx-auto py-8 px-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border-t-8 border-b-8 border-blue-500 dark:border-blue-700 overflow-hidden relative">
<div class="absolute -top-6 -right-6 w-24 h-24 bg-red-500 dark:bg-red-700 transform rotate-45 opacity-75"></div>
<div class="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-500 dark:bg-yellow-700 transform -rotate-45 opacity-75"></div>
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center uppercase tracking-wide relative z-10">
<span class="block">Explore Our Expertise</span>
<span class="block w-16 h-1.5 bg-blue-500 dark:bg-blue-700 mx-auto mt-2"></span>
</h2>
<div class="flex flex-wrap justify-center gap-2 sm:gap-3 lg:gap-4 relative z-10">
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-blue-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Strategy
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-red-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Innovation
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-yellow-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Technology
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-green-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Consulting
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-purple-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Digitalization
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-teal-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Analytics
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-orange-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-orange-600 dark:bg-orange-700 dark:hover:bg-orange-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Marketing
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-pink-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Branding
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-indigo-500 text-white text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Research
</a>
<a href="#" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 lg:px-6 lg:py-3 bg-lime-500 text-gray-900 text-sm sm:text-base font-semibold rounded-md shadow-lg
hover:bg-lime-600 dark:bg-lime-700 dark:hover:bg-lime-600 transition duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105">
Development
</a>
</div>
</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 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.
Composant Luxury Tag Cloud
Un composant de nuage de balises élégant et réactif conçu pour les services de conseil professionnels, avec une esthétique luxueuse/premium avec des tons de coucher de soleil/de couleurs chaudes et la prise en charge du mode sombre.