Компонент облака тегов

<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>