Componente de reproductor de vídeo
Un componente de reproductor de video minimalista diseñado para interfaces de redes sociales, con un diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
<video class="w-full h-64" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="p-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="text-white text-lg font-semibold">User Name</h2>
<p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
</div>
</div>
<div class="mt-2">
<p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
</div>
<div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
<button class="hover:text-white focus:outline-none">Like</button>
<button class="hover:text-white focus:outline-none">Share</button>
<button class="hover:text-white focus:outline-none">Comment</button>
</div>
</div>
</div>Componentes relacionados
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 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
Componente de reproductor de video receptivo con modo oscuro