Glassmorphism 360 Viewer 구성 요소

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-lg p-6 bg-white bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">Product 360° View</h2>
    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <img src="https://picsum.photos/seed/tool/600/400" alt="360 Product View" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20 dark:bg-blue-800 dark:bg-opacity-20 transform rotate-45 scale-150 opacity-0 transition-opacity duration-300 hover:opacity-100">
        <p class="text-white text-lg font-bold -rotate-45">360°</p>
      </div>
    </div>
    <div class="flex justify-around items-center">
      <button class="p-3 rounded-full bg-red-400 text-white dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-green-400 text-white dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>