360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-sm p-4 border-4 border-b-8 border-r-8 border-[#1A1A1A] dark:border-gray-600 rounded-lg shadow-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 overflow-hidden relative group">
    <!-- Top 'display' section -->
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-t-sm p-1 shadow-inner opacity-90">
      <div class="bg-black border border-gray-700 rounded-sm overflow-hidden aspect-video relative flex items-center justify-center">
        <img src="https://picsum.photos/400/300?random=1" alt="Product view" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"/>
        <!-- 'Lens flare' effect -->
        <div class="absolute w-1/2 h-1/2 bg-white opacity-10 rounded-full blur-xl animate-pulse"></div>
      </div>
    </div>

    <!-- Controls section -->
    <div class="p-3 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 rounded-b-md shadow-inner mt-2 border-t-2 border-black dark:border-gray-800">
      <div class="flex justify-around items-center space-x-2">
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          &lt; prev
        </button>
        <button class="relative flex-none w-16 h-16 bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-800 rounded-full border-4 border-yellow-200 dark:border-yellow-500 grid place-items-center text-gray-900 dark:text-gray-100 font-extrabold text-2xl shadow-lg hover:from-yellow-200 hover:to-red-400 hover:shadow-xl transition-all duration-300 animate-bounce-slowest">
          &#x21BB;
          <!-- 360 icon -->
          <span class="absolute top-1 right-1 text-xs text-black dark:text-white transform rotate-12">360°</span>
        </button>
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          next &gt;
        </button>
      </div>
      <div class="flex justify-around items-center text-xs mt-3 text-white dark:text-gray-900 font-bold opacity-80">
        <span>Angle: 0°</span>
        <span>Zoom: 1x</span>
      </div>
    </div>

    <!-- Decorative 'LED' indicators -->
    <div class="absolute top-4 left-4 flex space-x-1.5">
      <span class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow shadow-lg shadow-red-500/50"></span>
      <span class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse-slow animation-delay-100 shadow-lg shadow-yellow-400/50"></span>
      <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow animation-delay-200 shadow-lg shadow-green-500/50"></span>
    </div>

    <!-- Retro Price Tag -->
    <div class="absolute bottom-4 right-4 bg-gradient-to-br from-lime-300 to-green-500 dark:to-green-700 px-4 py-2 rounded-lg rotate-6 border-2 border-green-700 dark:border-green-300 shadow-xl font-bold text-lg text-black dark:text-gray-900 opacity-95 group-hover:rotate-0 group-hover:scale-110 transition-all duration-300">
        <span class="text-sm line-through text-red-700 dark:text-red-300">$129.99</span><br>$99.99
    </div>
  </div>

  <!-- Custom animations for retro feel -->
  <style>
    @keyframes bounce-slowest {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    .animate-bounce-slowest {
      animation: bounce-slowest 3s infinite ease-in-out;
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }
    .animation-delay-100 {
      animation-delay: 0.1s;
    }
    .animation-delay-200 {
      animation-delay: 0.2s;
    }
  </style>
</div>