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

<div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
    <div class="flex flex-col">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
      <p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
    </div>
  </div>
  <div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
    <iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
    <div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
  </div>
  <div class="mt-4">
    <button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
  </div>
</div>