Reproductor de vídeo
Componente de reproductor de video con estilo Material Design, efectos responsivos y soporte de temas oscuros mediante Tailwind CSS.
Código HTML
<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
<div class="relative">
<img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
<div class="absolute inset-0 flex items-center justify-center">
<button class="text-white text-6xl">
▶
</button>
</div>
</div>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
<p class="text-gray-700 dark:text-gray-300 text-base">
Video description goes here.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag1</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag2</span>
</div>
</div>Componentes relacionados
Componente de reproductor de video retro
Un componente de reproductor de video interactivo diseñado con una estética retro / vintage, con un esquema de color en escala de grises y múltiples elementos interactivos adecuados para fines de comercio electrónico, con soporte para modo oscuro.
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 vídeo monocromático 3D
Un componente de reproductor de video receptivo con elementos de diseño 3D y combinación de colores monocromática, adecuada para un tablero.