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 vídeo diseñado con morfismo de vidrio, con un efecto similar al vidrio esmerilado con colores complementarios. Es interactivo y receptivo, adecuado para el consumo de contenido de blog con soporte para temas oscuros.
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.
Componente de reproductor de vídeo
Un componente de reproductor de video simple diseñado utilizando los principios de Material Design con un diseño receptivo y soporte de temas oscuros.