Media Components Component

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>