Retro Media 嵌入组件

<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="relative" style="padding-bottom: 56.25%;">
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">Rad Video Title</h3>
        <span class="text-sm">5:32</span>
      </div>
      <p class="text-sm mb-4">
        Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis. 
      </p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
        <span class="text-sm font-semibold">Duke Silver</span>
      </div>
    </div>
  </div>
</div>