Componente de incrustación de medios

<div class="flex flex-col items-center p-6 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 dark:bg-opacity-50 border border-white border-opacity-20 max-w-lg w-full">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-white">John Doe</h2>
            <p class="text-sm text-gray-200">Content Creator</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 rounded-lg p-4 shadow-md w-full">
        <h3 class="text-lg font-bold text-white">Exciting New Developments in Technology</h3>
        <iframe class="w-full h-60 mt-3 rounded-lg shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
        <p class="mt-2 text-white">Explore the latest trends and advancements in technology that are shaping the future. Join us as we dive deep into the innovations that are changing our world.</p>
        <div class="mt-3 flex justify-between items-center">
            <button class="py-2 px-4 bg-blue-500 text-white rounded-full hover:bg-blue-600">Read More</button>
            <span class="text-xs text-gray-300">2 hours ago</span>
        </div>
    </div>
    <img src="https://picsum.photos/400/200" alt="Media" class="mt-4 rounded-lg shadow-lg"> 
</div>