媒体组件 Component Component
一个复杂的响应式媒体组件，用于博客内容消费，在深色模式下使用单色配色方案设置样式。它包括图像、标题、描述和作者头像。
HTML 代码
<div class="max-w-2xl mx-auto bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
<img class="w-full h-48 rounded-lg object-cover mb-4" src="https://picsum.photos/800/400" alt="Media Content">
<h2 class="text-2xl font-bold mb-2">Article Title</h2>
<p class="text-gray-400 mb-4">This is a short description of the content that provides a brief overview of what the article is about.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="text-sm font-semibold">John Doe</p>
<p class="text-xs text-gray-500">Published on January 1, 2023</p>
</div>
</div>
</div>相关组件
玻璃化媒体组件
一个响应式媒体卡组件，具有通过 Tailwind CSS 构建的 glassmorphism 设计（磨砂玻璃效果）。具有带有悬停显示播放图标的图像占位符（来自 picsum.photos）、文本内容、带有头像的作者部分（来自 randomuser.me）和作按钮。该组件使用 Tailwind CSS “dark：”变体支持深色模式，并且可以在各种屏幕尺寸上响应。不需要 JavaScript。为了获得最佳视觉效果，请将此组件放在对比鲜明的背景上。深色模式功能采用适当的 Tailwind CSS 配置（例如，tailwind.config.js中的 'darkMode： “class”' ）。