メディア埋め込みコンポーネント

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative">
        <img class="w-full" src="https://picsum.photos/600/400?random=1" alt="Media Thumbnail" />
        <div class="absolute top-0 left-0 right-0 bottom-0 bg-black opacity-25"></div>
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white rounded-full p-2 shadow flex items-center">
            <img class="rounded-full w-8 h-8 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
    </div>
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Vintage Media Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description of the media embed component. It encompasses a retro aesthetic reminiscent of the 80s and 90s, adorned with bright colors and distinctive patterns.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-sm text-gray-500 dark:text-gray-400">Posted on 01 Jan 1990</span>
            <a href="#" class="bg-pink-500 text-white px-3 py-1 rounded-full hover:bg-pink-600 transition">Watch Now</a>
        </div>
    </div>
</div>
<style>
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
      background-color: #2d3748;
    }
    .dark\:text-white {
      color: #fff;
    }
    .dark\:text-gray-300 {
      color: #e2e8f0;
    }
    .dark\:text-gray-400 {
      color: #cbd5e0;
    }
    .dark\:bg-gray-900 {
      background-color: #1a202c;
    }
    .dark\:border-gray-600 {
      border-color: #4a5568;
    }
  }
</style>