组件 媒体嵌入 媒体嵌入组件

媒体嵌入组件

一个响应式媒体嵌入组件,采用新拟态设计,具有鲜艳的色彩和适合仪表板应用的交互界面。

预览

HTML 代码

<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl transition-shadow duration-300"><h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Media Embed</h2><div class="flex flex-col items-center w-full mb-4"><img src="https://picsum.photos/400/200" alt="Media" class="rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105"/><p class="text-gray-600 dark:text-gray-300 mt-2">Watch our latest video to stay updated!</p></div><div class="flex w-full justify-between items-center mb-2"><button class="bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Play</button><button class="bg-red-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Like</button><button class="bg-yellow-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Share</button></div><div class="flex items-center mt-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md"/><p class="text-gray-800 dark:text-white ml-2">User Name</p></div></div>

相关组件

媒体嵌入组件 - 极简大地色调

用于仪表板的极简主义媒体嵌入组件,具有响应式设计和深色主题支持,使用大地色调。它显示视频播放器、标题、描述和频道信息。

打开

媒体嵌入组件

一个简单的、响应式的媒体嵌入组件,采用灰度3D设计和暗模式支持,适合商业网站。使用 Tailwind CSS 进行样式设计。

打开

媒体嵌入组件

一个简单的响应式媒体嵌入组件,具有 glassmorphism 设计、柔和的配色方案和深色模式支持,适用于博客和内容使用。

打开