HTML 代码
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="aspect-w-16 aspect-h-9 mb-4">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Engaging Data Visualization Techniques</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore innovative ways to present complex data for better insights and decision-making.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-green-500">
<span class="text-gray-700 dark:text-gray-300 text-sm">Data Insights Pro</span>
</div>
</div>相关组件
Retro Media 嵌入组件
具有“复古/复古”设计的响应式媒体嵌入组件，灵感来自 80 年代/90 年代的美学，如旧 CRT 显示器和 VCR 播放器。它在石板灰色底色上使用蓝绿色和橙色的互补配色方案，适用于“商业/公司”网站。该组件具有中等复杂度，在播放按钮和媒体缩略图上具有悬停效果、仿 REC 灯光动画和装饰性非功能性控制元素。它包括使用 Tailwind 的 'dark：' 前缀的深色主题支持。媒体区域设计为 16：9 纵横比（需要 Tailwind 纵横比插件或 CSS 回退，如 padding-bottom 技巧）。使用 picsum.photos 中的占位符图像。