Composant de nuage de balises
Un composant de nuage de balises simple, propre et dynamique adapté aux environnements professionnels, spécialement conçu pour les systèmes de réservation. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Categories & Services</h2>
<div class="flex flex-wrap justify-center gap-3 sm:gap-4">
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-700 dark:hover:bg-blue-800">
Consultation
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-purple-600 hover:bg-purple-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 dark:bg-purple-700 dark:hover:bg-purple-800">
Meeting
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-green-600 hover:bg-green-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-700 dark:hover:bg-green-800">
Webinar
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-yellow-600 hover:bg-yellow-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-700 dark:hover:bg-yellow-800">
Workshop
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-red-600 hover:bg-red-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 dark:bg-red-700 dark:hover:bg-red-800">
Demonstration
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-orange-600 hover:bg-orange-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 dark:bg-orange-700 dark:hover:bg-orange-800">
Strategy Session
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-teal-600 hover:bg-teal-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75 dark:bg-teal-700 dark:hover:bg-teal-800">
Training
</button>
<button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-pink-600 hover:bg-pink-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 dark:bg-pink-700 dark:hover:bg-pink-800">
Support Call
</button>
</div>
</div>Composants associés
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.
Composant de nuage de balises
Un composant de nuage de balises conçu dans le style Neumorphism, utilisant un schéma de couleurs monochromatiques à des fins de commerce électronique et prenant en charge le thème sombre avec un design réactif.
Composant de nuage de balises
Un composant de nuage de balises réactif conçu selon les principes de Material Design, avec une palette de couleurs à contraste élevé adaptée aux tableaux de bord. Inclut la prise en charge du mode sombre et le HTML sémantique pour l’accessibilité. Des effets de survol sont inclus pour l’interactivité.