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
Tag Cloud Component Glassmorphism Monochromatique Complexe E-commerce
Glassmorphism Tag Cloud Component pour le commerce électronique
Composant de nuage de balises
Un composant de nuage de balises réactif avec une conception monospace/développeur, une palette de couleurs néon/électrique et une prise en charge du mode sombre, adapté aux plates-formes de divertissement/médias.
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.