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.
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>Composants associés
Composant de nuage de balises
Un composant de nuage de balises conçu dans le style Neumorphism, utilisant un schéma de couleurs monochromatiques à des fins de commerce électronique et prenant en charge le thème sombre avec un design réactif.
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.
Composant de nuage de balises
Un composant de nuage de balises réactif avec des animations attrayantes, utilisant un schéma de couleurs monochromatiques adapté à un portfolio.