HTML 代码
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
<div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
<div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
<div class="relative z-10 space-y-4">
<!-- Video/Media Placeholder -->
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
</div>
<!-- Title -->
<div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
Business Insights: Q3 Performance
</div>
<!-- Description -->
<p class="text-stone-600 dark:text-stone-300 text-sm">
A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
</p>
<!-- Action Button (Optional) -->
<button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
Learn More
</button>
<!-- Metadata/Source (Optional) -->
<div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span>Published: October 26, 2023</span>
</div>
</div>
</div>
</div>