Componente de incrustación de medios

<div class="dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
      <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-4 text-white">
          <h3 class="text-xl font-bold">Media Title</h3>
          <p class="text-sm">Date Published</p>
        </div>
      </div>
      <div class="p-4">
        <p class="text-gray-700 dark:text-gray-300 text-base">
          This is a description of the media content. It can be a short summary or excerpt.
        </p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Author Name</p>
            <p class="text-gray-600 dark:text-gray-400">Author Title</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>