Reproductor de vídeo
Componente de reproductor de video con microinteracciones, combinación de colores complementaria, complejidad moderada y diseño receptivo con soporte de tema oscuro para uso de cartera.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
<div class="relative">
<video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
<button class="text-white text-4xl">
▶
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
</div>
</div>
</div>Componentes relacionados
Componente de reproductor de vídeo
Un componente de reproductor de video neomórfico diseñado para la exhibición de portafolios, con un tema oscuro y un diseño receptivo que usa Tailwind CSS.
Reproductor de video minimalista
Componente de reproductor de vídeo codificado en HTML con Tailwind CSS. Tiene un diseño minimalista que utiliza un esquema de color en escala de grises, destinado al uso en el tablero. Es un componente complejo con múltiples elementos interactivos y es totalmente responsivo con soporte para modo oscuro.
Componente de reproductor de vídeo
Un componente de reproductor de vídeo sensible diseñado para el modo oscuro con un esquema de color análogo para el consumo de contenido.