비디오 플레이어 구성 요소

<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden
              flex flex-col lg:flex-row transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-700">

    <!-- Video Player Section -->
    <div class="relative flex-1 bg-black overflow-hidden group">
      <video class="w-full h-full object-contain" poster="https://picsum.photos/1280/720?random=1" controls="false" playsinline>
        <!-- Replace with actual video source -->
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>

      <!-- Overlay for play button and controls fade -->
      <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <!-- Big Play Button (initially visible, fades out on play) -->
        <button class="absolute text-white text-opacity-80 hover:text-opacity-100 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-teal-500/50 rounded-full">
          <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z" />
          </svg>
        </button>

        <!-- Controls bar (fades in on hover) -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/70 to-transparent
                    translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out
                    flex flex-col space-y-2 opacity-0 group-hover:opacity-100">

          <!-- Progress Bar -->
          <div class="w-full h-2 bg-gray-700 rounded-full cursor-pointer group">
            <div class="h-full bg-teal-400 rounded-full w-1/3 group-hover:bg-teal-300 transition-all duration-150 relative">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-teal-400 rounded-full scale-0 group-hover:scale-100 transition-transform duration-150"></div>
            </div>
          </div>

          <!-- Controls -->
          <div class="flex items-center justify-between text-white text-opacity-90">
            <div class="flex items-center space-x-4">
              <!-- Play/Pause -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 19.823L22 12 14.017 4.177V9H2v6h12.017z" />
                </svg>
              </button>
              <!-- 10s back -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2zm6.27 4.54l-1.42 1.42C16.14 15.65 15 16 15 16s0-.8.03-1.07l1.09-1.09c.47-.47.66-1.12.5-1.74l-.99-3.46c-.16-.62-.97-1.1-1.55-.77l-1.76.99-1.42-1.42L15 6.77c.46-.22.98-.32 1.5-.27l3.46.99c.62.16 1.1.97.77 1.55l-.99 1.76-1.42 1.42z" />
                </svg>
              </button>

              <!-- Volume -->
              <div class="relative flex items-center group">
                <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 10v4c0 .55.45 1 1 1h3l5 5V5l-5 5H4c-.55 0-1 .45-1 1zm12.5 4.58l-1.41-1.41c.95-.95 1.56-2.22 1.56-3.57s-.61-2.62-1.56-3.57l1.41-1.41c1.36 1.36 2.22 3.25 2.22 5s-.86 3.64-2.22 5z" />
                  </svg>
                </button>
                <input type="range" min="0" max="100" value="70" class="ml-2 w-0 group-hover:w-24 overflow-hidden appearance-none bg-transparent h-1 rounded-full dark:bg-gray-700 transition-all duration-300 ease-out focus:outline-none
                                      [&::-webkit-slider-runnable-track]:bg-gray-700 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-teal-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:-mt-1.5
                                      [&::-moz-range-track]:bg-gray-700 [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-thumb]:bg-teal-400 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full">
              </div>

              <span class="text-sm">00:00 / 02:30</span>
            </div>

            <div class="flex items-center space-x-4">
              <!-- Settings -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                </svg>
              </button>
              <!-- Fullscreen -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                </svg>
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Product Info Section -->
    <div class="w-full lg:w-96 p-6 lg:p-8 flex flex-col space-y-6 bg-yellow-50 dark:bg-gray-800 
                text-gray-900 dark:text-gray-100 border-t lg:border-t-0 lg:border-l border-yellow-200 dark:border-gray-700">

      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-2xl lg:text-3xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight">Organic Hand Cream</h2>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Lavender & Aloe Vera</p>
        </div>
        <span class="text-3xl font-bold text-teal-600 dark:text-teal-400 animate-pulse-once">$29.99</span>
      </div>

      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
        Discover the soothing power of nature with our best-selling hand cream. Enriched with organic lavender and aloe vera, it deeply moisturizes and rejuvenates your skin, leaving it soft and fragrant.
      </p>

      <!-- Features/Highlights -->
      <div class="grid grid-cols-2 gap-4 text-sm">
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Organic Certified</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2zm6 13H4V8h16v11z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Vegan Friendly</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">5-star Rated</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Cruelty-Free</span>
        </div>
      </div>

      <!-- Call to Action -->
      <button class="w-full py-3 px-6 rounded-xl
                     bg-teal-500 text-white text-lg font-semibold shadow-md
                     hover:bg-teal-600 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-teal-500/50
                     active:scale-98 transform transition-all duration-200 ease-in-out
                     dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500/50">
        Add to Cart
        <span class="ml-2 inline-block transition-transform group-hover:translate-x-1 duration-200 animate-bounce-horizontal-once">
          <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.25 10.01l-1.63-1.63c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.19 11l-9 9H4v-1.72L11 9.19l1.63 1.63c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L17.25 10.01zM11 6.17l5.24 5.24L11 16.65 6.17 11.24zM16 2l-2 2h-4L8 2H2v20h20V2h-6z"/>
          </svg>
        </span>
      </button>

      <!-- Small Description / Reviews -->
      <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-2">
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar">
        </div>
        <span>+2,450 Happy Customers</span>
      </div>

    </div>

  </div>

  <!-- Custom keyframe animation definitions for microinteractions -->
  <style>
    @keyframes pulse-once {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .animate-pulse-once {
      animation: pulse-once 1.2s ease-in-out;
    }

    @keyframes bounce-horizontal-once {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(5px); }
      50% { transform: translateX(-5px); }
      75% { transform: translateX(2px); }
    }
    .animate-bounce-horizontal-once {
      animation: bounce-horizontal-once 0.8s ease-out;
    }
  </style>

  <!-- Dark mode toggle for demonstration, not part of the component itself -->
  <script>
    // This script toggles dark mode for demonstration purposes.
    // In a real application, you'd likely use a framework or store user preference.
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    function toggleDarkMode() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
      } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
      }
    }
  </script>
  <button onclick="toggleDarkMode()" class="fixed bottom-4 right-4 p-3 rounded-full bg-gray-800 text-white shadow-lg z-50 dark:bg-white dark:text-gray-900 focus:outline-none focus:ring-4 focus:ring-teal-500/50">
    <svg class="w-6 h-6 block dark:hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    <svg class="w-6 h-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.04 6.29a.75.75 0 0 1 1.06-.02l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-.02 1.06ZM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1.5a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H12a.75.75 0 0 1 .75.75ZM16.96 6.29A.75.75 0 0 1 18.02 7.35l-1.5 1.5a.75.75 0 0 1-1.06-.02l-1.5-1.5a.75.75 0 0 1 .02-1.06ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5.25 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM20.72 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5h2.25a.75.75 0 0 1 .75.75ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM7.04 17.71a.75.75 0 0 1-.02-1.06l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-1.06.02Zm9.92 0a.75.75 0 0 1 .02-1.06l1.5-1.5a.75.75 0 1 1 1.04 1.08l-1.5 1.5a.75.75 0 0 1-1.06-.02Z"/></svg>
  </button>

</div>