Composant de nuage de balises
Un composant de nuage de balises simple et réactif avec une esthétique monospace/développeur, une palette de couleurs sourdes, conçu pour les sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.
HTML Code
<div class="font-mono bg-gray-100 text-gray-800 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-start justify-center">
<div class="w-full max-w-4xl bg-white shadow-lg rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-2">
<span class="block">explore: _</span>
<span class="sr-only">Explore Destinations</span>
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Discover popular travel tags and destinations.</p>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 sm:gap-3">
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100 dark:hover:bg-blue-700 transition-colors duration-200">
<span class="pr-1">•</span> Beaches
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700 transition-colors duration-200">
<span class="pr-1">•</span> Mountains
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-700 transition-colors duration-200">
<span class="pr-1">•</span> Cities
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-800 dark:text-yellow-100 dark:hover:bg-yellow-700 transition-colors duration-200">
<span class="pr-1">•</span> Adventures
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700 transition-colors duration-200">
<span class="pr-1">•</span> Culture
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-800 dark:text-indigo-100 dark:hover:bg-indigo-700 transition-colors duration-200">
<span class="pr-1">•</span> Wildlife
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-800 dark:text-pink-100 dark:hover:bg-pink-700 transition-colors duration-200">
<span class="pr-1">•</span> Ecotourism
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-800 dark:text-teal-100 dark:hover:bg-teal-700 transition-colors duration-200">
<span class="pr-1">•</span> Relaxation
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 transition-colors duration-200">
<span class="pr-1">•</span> Historical Sites
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-cyan-100 text-cyan-800 hover:bg-cyan-200 dark:bg-cyan-800 dark:text-cyan-100 dark:hover:bg-cyan-700 transition-colors duration-200">
<span class="pr-1">•</span> Food Tours
</a>
</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
Un composant de nuage de balises monospace, inspiré du code, pour les sites Web de jeux avec des couleurs à contraste élevé et la prise en charge du mode sombre. Présente une esthétique de type terminal avec des balises interactives.