Gradient Rainbow 视频播放器组件

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-400 via-pink-500 to-red-500
              dark:from-purple-800 dark:via-pink-900 dark:to-red-900
              p-1 sm:p-1.5 md:p-2">
    <div class="bg-white dark:bg-gray-800 rounded-md flex flex-col md:flex-row relative z-10 p-4 sm:p-6 lg:p-8">

      <!-- Video Player Section -->
      <div class="w-full md:w-3/5 lg:w-2/3 flex-shrink-0 mb-6 md:mb-0 md:mr-6 lg:mr-8 relative aspect-video overflow-hidden rounded-md group">
        <video class="w-full h-full object-cover rounded-md" poster="https://picsum.photos/seed/video-thumb/800/450">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <!-- Play Button Overlay -->
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 rounded-md opacity-100 group-hover:opacity-0 transition-opacity duration-300 ease-in-out cursor-pointer">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white" fill="currentColor" viewBox="0 0 20 20">
            <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>
        </div>
      </div>

      <!-- Video Info & Controls Section -->
      <div class="flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 leading-tight">
            Dashboard Data Visualization Overview
          </h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 sm:mb-6">
            A concise walkthrough of our latest dashboard features and key data insights.
          </p>

          <div class="flex items-center text-sm mb-4">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Presenter avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-gray-500 dark:text-gray-400">Analytics Lead</p>
            </div>
          </div>

          <div class="text-xs text-gray-500 dark:text-gray-400 mb-4">
            <p>Published: 3 days ago</p>
            <p>Views: 1.2M</p>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-auto flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 py-3 px-6 rounded-lg text-sm font-semibold
                         bg-gradient-to-r from-blue-500 to-teal-500 text-white dark:text-gray-100
                         hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
            </svg>
            Download Report
          </button>
          <button class="flex-1 py-3 px-6 rounded-lg text-sm font-semibold
                         bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                         hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                         shadow-md hover:shadow-lg transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="inline-block w-4 h-4 mr-2 -mt-0.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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            Leave Feedback
          </button>
        </div>
      </div>

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