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

<div class="p-8 bg-gray-200 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-4xl transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] border border-gray-300 dark:border-gray-600">
    <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" 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="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-2">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-4 tracking-tight drop-shadow-sm">The Art of Skeuomorphism in UI Design</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Skeuomorphism, as a design principle, involves incorporating ornamental design cues from physical objects into digital interfaces. It aims to make new functions familiar and intuitive by mimicking real-world counterparts. This approach often uses textures, shadows, and highlights to give digital elements a tangible feel, enhancing user comprehension and engagement, especially in blog and content consumption platforms.
        </p>

        <div class="border-t border-b border-gray-400 dark:border-gray-600 py-4 mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
          </div>
          <div class="flex space-x-3 text-gray-600 dark:text-gray-400">
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <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 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 11H9V9h2V7h2v2h2v2h-2v2h-2v-2z"/></svg>
            </a>
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <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-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </a>
          </div>
        </div>

        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Transcript</h3>
        <div class="bg-gray-300 dark:bg-gray-700 p-5 rounded-xl shadow-inner border border-gray-400 dark:border-gray-600 h-64 overflow-y-auto custom-scrollbar">
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:00]</span> Welcome to our deep dive into Skeuomorphism, a fascinating design trend that continues to influence digital interfaces.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:15]</span> Originally, skeuomorphism helped users transition from physical to digital tools by replicating familiar real-world cues.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:30]</span> Think about the early calculator apps that looked exactly like physical calculators, with their three-dimensional buttons and LCD displays.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:45]</span> This design philosophy provides a sense of tangibility and familiarity, making complex digital interactions feel more intuitive.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:00]</span> While minimalism has gained prominence, skeuomorphism still finds its place, especially in applications where a sense of realism or traditional aesthetics is key.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:15]</span> For content platforms and blogs, it can enhance readability by visually separating content blocks and interactive elements.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:30]</span> This component demonstrates how skeuomorphic principles, combined with a monochromatic palette, can create a rich, inviting, and highly functional media embed.
          </p>
          <p class="text-gray-800 dark:text-gray-200">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:45]</span> We hope this component inspires you to explore the depths of design.
          </p>
        </div>
      </div>

      <div class="md:col-span-1">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Related Content</h3>
        <div class="space-y-4">
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=1" alt="Related image 1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">The Revival of Vintage Design</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Explore how old-school aesthetics are making a comeback in modern design.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=2" alt="Related image 2">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Monochromatic Magic in UI</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Discover the power of single-color palettes in creating cohesive interfaces.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=3" alt="Related image 3">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Responsive Design Best Practices</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Learn how to build websites that look great on any device, anywhere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #ccc;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border: 3px solid #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
  }
</style>