Componente de nube de etiquetas
Un componente de nube de etiquetas receptivo con un diseño monoespaciado / desarrollador, combinación de colores neón / eléctrico y soporte de modo oscuro, adecuado para plataformas de entretenimiento / medios.
Código HTML
<div class="font-mono bg-gray-950 text-gray-100 min-h-screen p-4 sm:p-8 dark:bg-black">
<div class="max-w-7xl mx-auto py-8">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-12 text-neon-blue dark:text-neon-pink drop-shadow-neon-blue dark:drop-shadow-neon-pink transition-colors duration-300">
<span class="block">/tag_cloud$</span>
<span class="block">_explore_topics_</span>
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6">
<!-- Tag Item -->
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
<div class="absolute inset-0 bg-gradient-to-br from-neon-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-green group-hover:text-neon-blue dark:text-neon-pink dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Action)</h3>
<p class="text-gray-400 text-sm mb-4">> 125,432 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#SciFi</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Thriller</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<!-- Repeat Tag Item for other categories -->
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
<div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-pink dark:text-neon-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Comedy)</h3>
<p class="text-gray-400 text-sm mb-4">> 98,123 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Standup</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Skit</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
<div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Drama)</h3>
<p class="text-gray-400 text-sm mb-4">> 76,890 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Romance</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Historical</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
<div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-lime-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-lime-green dark:text-neon-blue dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Fantasy)</h3>
<p class="text-gray-400 text-sm mb-4">> 54,321 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Magic</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Adventure</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-lime-green">
<div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-green dark:text-neon-pink dark:group-hover:text-lime-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Horror)</h3>
<p class="text-gray-400 text-sm mb-4">> 32,109 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Slasher</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Supernatural</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
<div class="absolute inset-0 bg-gradient-to-br from-neon-green/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-green group-hover:text-neon-pink dark:text-neon-blue dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Animation)</h3>
<p class="text-gray-400 text-sm mb-4">> 43,210 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Anime</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#CGI</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-lime-green">
<div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-lime-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-lime-green dark:text-neon-green dark:group-hover:text-lime-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Documentary)</h3>
<p class="text-gray-400 text-sm mb-4">> 21,987 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Science</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Nature</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
<div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Music)</h3>
<p class="text-gray-400 text-sm mb-4">> 87,654 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Pop</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Rock</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
<div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-pink dark:text-neon-blue dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Kids)</h3>
<p class="text-gray-400 text-sm mb-4">> 65,432 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Educational</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Cartoon</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
<div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-pink dark:text-lime-green dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Science Fiction)</h3>
<p class="text-gray-400 text-sm mb-4">> 78,901 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Space</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Future</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
<div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Thriller)</h3>
<p class="text-gray-400 text-sm mb-4">> 90,123 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Mystery</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Suspense</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
<div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative p-4 sm:p-6 text-center">
<h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Sport)</h3>
<p class="text-gray-400 text-sm mb-4">> 45,678 items</p>
<div class="flex justify-center flex-wrap gap-2 text-xs">
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Football</span>
<span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Racing</span>
</div>
</div>
<div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</div>
</div>
</div>
</div>
<style>
/* This is often added in a global CSS file or via a build step for custom colors */
.text-neon-blue {
color: #00e5ff;
}
.drop-shadow-neon-blue {
filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 15px #00e5ff);
}
.border-neon-blue {
border-color: #00e5ff;
}
.bg-neon-blue\/30 {
background-color: rgba(0, 229, 255, 0.3);
}
.text-neon-pink {
color: #ff00ea;
}
.drop-shadow-neon-pink {
filter: drop-shadow(0 0 5px #ff00ea) drop-shadow(0 0 15px #ff00ea);
}
.border-neon-pink {
border-color: #ff00ea;
}
.bg-neon-pink\/30 {
background-color: rgba(255, 0, 234, 0.3);
}
.text-lime-green {
color: #76ff03;
}
.border-lime-green {
border-color: #76ff03;
}
.bg-lime-green\/30 {
background-color: rgba(118, 255, 3, 0.3);
}
/* Dark mode specific overrides for colors */
.dark .text-neon-blue {
color: #00e5ff; /* Keep blue bright in dark mode */
}
.dark .drop-shadow-neon-blue {
filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 15px #00e5ff);
}
.dark .border-neon-blue {
border-color: #00e5ff;
}
.dark .text-neon-pink {
color: #ff00ea; /* Keep pink bright in dark mode */
}
.dark .drop-shadow-neon-pink {
filter: drop-shadow(0 0 5px #ff00ea) drop-shadow(0 0 15px #ff00ea);
}
.dark .border-neon-pink {
border-color: #ff00ea;
}
.dark .text-lime-green {
color: #76ff03;
}
.dark .border-lime-green {
border-color: #76ff03;
}
</style>
</div>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas simple, limpio y vibrante adecuado para entornos comerciales, diseñado específicamente para sistemas de reservas. Es responsivo e incluye soporte para el modo oscuro.
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 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.