组件 视频播放器 视频播放器组件

视频播放器组件

一个响应式视频播放器组件,采用粗野主义风格,支持暗模式。它具有高对比度和大胆的布局,使用Tailwind CSS进行样式设计,并包括占位符图像和头像。

预览

HTML 代码

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
  <h2 class="text-3xl font-bold mb-4">Video Player</h2>
  <div class="relative mb-4">
    <img class="w-full h-auto rounded-lg" src="https://picsum.photos/800/450" alt="Placeholder Video Thumbnail" />
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="bg-red-600 text-white p-3 rounded-full focus:outline-none">
        Play
      </button>
    </div>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-3">
      <p class="text-lg font-semibold">User Name</p>
      <p class="text-sm text-gray-400">Uploaded 2 days ago</p>
    </div>
  </div>
  <div class="flex justify-between text-sm text-gray-400">
    <span>1,234 views</span>
    <span>20 likes</span>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold">Description</h3>
    <p class="text-gray-300 mt-2">This is a brief description of the video content, designed in a bold, raw style that reflects the principles of brutalism.</p>
  </div>
</div>

相关组件

视频播放器组件 - 水彩/艺术、海洋/蓝色、医疗保健

一个简单、响应式的视频播放器组件,具有水彩/艺术设计风格和海洋/蓝色配色方案,适用于医疗保健和医疗应用程序。包括深色模式支持。

打开

视频播放器组件

具有 Glassmorphism 风格、类似配色方案和中等复杂性的视频播放器组件,用于博客/内容目的,具有响应式设计和使用 Tailwind CSS 的深色主题支持。没有 Javascript。

打开

视频播放器组件

一个使用Tailwind CSS样式设计的响应式视频播放器组件,专注于微交互和深色主题支持。

打开