HTML 代码
<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>