3Dモノクロオーディオプレーヤー

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6 transform transition-all duration-300 hover:scale-105">
    <!-- 3D Effect Base -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-lg opacity-50 transform translate-x-2 translate-y-2"></div>

    <div class="relative z-10">
      <!-- Album Art (Placeholder with 3D depth) -->
      <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-md mb-4 overflow-hidden relative">
        <img src="https://picsum.photos/400/300" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110">
        <!-- Simple Overlay for Depth -->
        <div class="absolute inset-0 bg-black opacity-10"></div>
      </div>

      <!-- Song Title and Artist -->
      <div class="text-center mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title Goes Here</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>

      <!-- Progress Bar (Simple 3D look) -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4 relative">
        <div class="bg-blue-500 dark:bg-blue-400 h-2.5 rounded-full" style="width: 50%;"></div>
        <!-- Simple highlight for 3D effect -->
        <div class="absolute top-0 left-0 h-full bg-white opacity-20 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Controls (Simple, with potential for interactive 3D effect on hover) -->
      <div class="flex justify-center space-x-6">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Previous Button -->
          <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="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-125">
          <!-- Simple SVG Placeholder for Play Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 14.17V9.83a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Next Button -->
          <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="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>