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

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">

  <div class="flex flex-col md:flex-row">

    <!-- Media Embed Placeholder -->

    <div class="md:w-2/3 w-full">

      <div class="aspect-w-16 aspect-h-9 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden">

        <!-- Placeholder for embedded media (e.g., iframe for YouTube, Vimeo, etc.) -->

        <!-- Replace with your actual embed code -->

        <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>

      </div>

    </div>



    <!-- Content Area -->

    <div class="md:w-1/3 w-full md:ml-4 mt-4 md:mt-0">

      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Media Title</h3>

      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">

        A brief description of the embedded media goes here. Provide context or a summary.

      </p>

      <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">

        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">

          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />

        </svg>

        <span>Published on: October 26, 2023</span>

      </div>

    </div>



  </div>

</div>