Componente 3 del reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado en estilo Neumorphism con soporte para temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
<div class="video-container rounded-2xl overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
<div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
</svg>
</div>
</div>
<div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
<div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
</div>
<div class="text-gray-600 dark:text-gray-400">10:30</div>
</div>
</div>
</div>Componentes relacionados
Componente de reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado con el estilo Neumorphism, utilizando Tailwind CSS. Cuenta con soporte para el modo oscuro con sombras sutiles para dar una apariencia de interfaz de usuario suave.
Componente de reproductor de vídeo
Un componente de reproductor de vídeo complejo y receptivo para el comercio electrónico, con colores triádicos y un diseño centrado en la microinteracción. Incluye controles de reproducción, volumen, barra de progreso, pantalla completa, configuraciones y una superposición de productos, con soporte completo para el modo oscuro.
Componente de reproductor de vídeo
Un componente de reproductor de video de estilo retro / vintage con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.