Componente de nube de etiquetas
Un componente de nube de etiquetas simple y receptivo con una estética monoespaciada/de desarrollador, esquema de color apagado, diseñado para sitios web de viajes/turismo. Incluye soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas con estilo de diseño Neumorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de nube de etiquetas de la Bauhaus
Un componente de nube de etiquetas complejo y receptivo con un diseño inspirado en la Bauhaus, que utiliza neutros fríos, adecuado para plataformas educativas con soporte para modo oscuro.
Componente de nube de etiquetas
Un componente de Tag Cloud complejo y receptivo con microinteracciones, diseñado para un panel de control, utilizando un esquema de color en escala de grises. Soporta el modo oscuro.