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

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
    <div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
      <!-- Media Embed Area -->
      <div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
        <!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
        <img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
          Video Placeholder
        </div>
      </div>

      <!-- Content Details -->
      <div class="space-y-3">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
          Exploring the Serene Landscapes
        </h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
          Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
        </p>
        <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
          <span>By Jessica Lee</span>
          <span class="text-gray-500 dark:text-gray-600">•</span>
          <span>March 15, 2024</span>
        </div>
      </div>
    </div>
  </div>
</div>