Retro_Rainbow_Buttons_Component

<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300">
    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-300 dark:to-red-300 drop-shadow-lg">
      Capture the Moment
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-items-center">

      <!-- Button 1: Classic Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600 
                     text-white font-bold uppercase tracking-wider text-lg 
                     transition-all duration-300 
                     transform hover:-translate-y-1 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-500/50">
        <span class="absolute inset-0 border-4 border-white dark:border-gray-900 rounded-lg group-hover:rotate-6 group-hover:scale-110 transition-transform duration-300"></span>
        <span class="relative z-10">View Gallery</span>
      </button>

      <!-- Button 2: Striped Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-b from-blue-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:-skew-x-6 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-500/50">
        <span class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/30 to-transparent 
                     w-full h-full rotate-45 transform -translate-x-full 
                     group-hover:translate-x-full transition-transform duration-700"></span>
        <span class="relative z-10">Portfolio</span>
      </button>

      <!-- Button 3: Gradient Border -->
      <button class="relative group px-7 py-3 rounded-lg 
                     bg-gray-200 dark:bg-gray-700 
                     text-gray-800 dark:text-gray-200 
                     font-bold uppercase tracking-wide text-lg 
                     transition-all duration-300 
                     transform hover:scale-105 hover:shadow-xl 
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500/50">
        <div class="absolute inset-0.5 rounded-md bg-white dark:bg-gray-800"></div>
        <div class="absolute inset-0.5 rounded-md bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 
                    animate-pulse group-hover:animate-none 
                    opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
        <span class="relative z-10">My Work</span>
      </button>

      <!-- Button 4: Neon Glow Effect -->
      <button class="relative group px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:translate-y-px hover:shadow-2xl 
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500/50">
        <span class="absolute inset-0.5 rounded-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     filter blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
        <span class="relative z-10 
                     drop-shadow-[0_0_5px_rgba(255,255,255,0.7)] group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,1)] transition-all duration-300">About Me</span>
      </button>

      <!-- Button 5: Square Pixelated -->
      <button class="relative group overflow-hidden px-8 py-3 
                     bg-gradient-to-br from-teal-400 via-lime-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-lg 
                     shadow-lg transform transition-all duration-300 
                     hover:-translate-x-1 hover:-translate-y-1 
                     active:translate-x-0 active:translate-y-0 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500/50" 
              style="clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);">
        <span class="absolute inset-0 bg-black/10 dark:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></span>
        <span class="relative z-10 drop-shadow-md">Contact</span>
      </button>

      <!-- Button 6: Multi-layered 3D -->
      <button class="relative group px-8 py-3 
                     bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     shadow-[5px_5px_0_0_rgba(0,0,0,0.2)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,0.1)] 
                     transition-all duration-300 transform 
                     hover:-translate-x-1 hover:-translate-y-1 
                     hover:shadow-[7px_7px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[7px_7px_0_0_rgba(255,255,255,0.15)] 
                     focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-500/50">
        <span class="relative z-10">Services</span>
        <span class="absolute inset-0 border-2 border-white dark:border-gray-900 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></span>
      </button>

    </div>

    <div class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm md:text-base">
      <p>Explore my photography journey, one click at a time.</p>
      <p class="mt-2">© <span id="current-year"></span> Your Photography Name. All rights reserved.</p>
    </div>

  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>