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 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.
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 responsivo con Tailwind CSS centrado en las microinteracciones y la compatibilidad con temas oscuros.