Tag Cloud Component
A responsive tag cloud component with a monospace/developer design, neon/electric color scheme, and dark mode support, suitable for entertainment/media platforms.
HTML Code
<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>Related Components
Tag Cloud Component
A Tag Cloud Component with Neumorphism design style, responsive effects, and dark theme support using Tailwind CSS.
Tag Cloud Component
A Tag Cloud Component designed with Neumorphism style in grayscale, suitable for blogs and content consumption, featuring interactive elements.
Tag Cloud Component
A responsive Tag Cloud Component with Material Design styles, a complementary color scheme, and moderate complexity for e-commerce purposes, featuring dark theme support.