3D_Forest_Audio_Player

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 rotateY-2 transition-all duration-300 ease-in-out hover:rotateX-0 hover:rotateY-0 border-t border-l border-green-200 dark:border-green-700 bg-gradient-to-br from-green-50/50 to-emerald-50/50 dark:from-gray-800/50 dark:to-gray-900/50" style="transform-style: preserve-3d; perspective: 1000px;">
    <div class="p-6 md:p-8 lg:p-10 relative">
      <!-- Top '3D' Bevel -->
      <div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-600/20 dark:from-green-700/20 dark:to-emerald-800/20 rounded-3xl" style="transform: translateZ(-50px);"></div>

      <div class="relative z-10">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <span class="text-xs md:text-sm uppercase tracking-wider text-green-700 dark:text-green-300 font-bold">Lesson Audio</span>
          <button class="p-2 rounded-full text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500">
            <svg class="w-5 h-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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- Album Art / Thumbnail -->
        <div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg mb-6 transform translateZ(20px)">
          <img src="https://picsum.photos/600/350?random=1" alt="Course Thumbnail" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 ease-in-out hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl"></div>
          <div class="absolute bottom-4 left-4 right-4 text-white">
            <h3 class="text-lg md:text-xl font-bold mb-1 drop-shadow-md">Understanding Photosynthesis</h3>
            <p class="text-sm text-gray-200 drop-shadow-sm">Biology Basics - Chapter 3</p>
          </div>
        </div>

        <!-- Controls and Progress Bar -->
        <div class="mb-6">
          <div class="flex justify-between items-center text-sm font-medium text-green-800 dark:text-green-200 mb-2">
            <span>1:23</span>
            <span>-3:45</span>
          </div>
          <div class="w-full bg-green-200 dark:bg-green-700 rounded-full h-2.5 relative transform translateZ(10px)">
            <div class="bg-green-500 dark:bg-green-400 h-2.5 rounded-full" style="width: 30%;"></div>
            <div class="absolute -top-0.5 left-[calc(30%-8px)] w-4 h-4 bg-white dark:bg-gray-800 rounded-full shadow-md border-2 border-green-500 dark:border-green-400 transform translateZ(5px)"></div>
          </div>
        </div>

        <div class="flex items-center justify-around mb-6 space-x-2">
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.817 4.218 2.155 5.74M15 9V3M9 15v6"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" 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="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
          </button>
          <button class="p-4 md:p-5 lg:p-6 rounded-full bg-green-500 dark:bg-green-600 text-white shadow-xl hover:scale-110 active:scale-90 transition-all duration-300 transform translateZ(25px) border-4 border-green-300 dark:border-green-500/50">
            <svg class="w-8 h-8 md:w-9 md:h-9" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" 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="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" 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="M14.746 12C12.9 8.7 10.6 5.4 8.7 2.1m-2.1 6.6c-1.3 2.1-2.6 4.2-3.9 6.3M21 12c-1.8 3.3-4.1 6.6-6 9.9m-2.1-6.6c1.3-2.1 2.6-4.2 3.9-6.3M12 12a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- More Info -->
        <div class="flex items-center space-x-4 bg-green-50 dark:bg-gray-700 p-4 rounded-xl shadow-inner transform translateZ(10px) border border-green-200 dark:border-gray-600">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-12 h-12 rounded-full object-cover shadow-md">
          <div>
            <p class="text-sm font-semibold text-green-900 dark:text-green-100">Taught by Dr. Elara Vance</p>
            <p class="text-xs text-green-700 dark:text-green-300">Botanist & Environmental Scientist</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>