Componente de reproductor de vídeo
Un componente de reproductor de video simple diseñado con un estilo 3D y una combinación de colores pastel, adecuado para tableros.
Código HTML
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex flex-col items-start mt-4 w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
<div class="flex items-center mt-2">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
<span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
</div>
</div>
</div>Componentes relacionados
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
Un componente de reproductor de video minimalista diseñado para interfaces de redes sociales, con un diseño receptivo con soporte para temas oscuros.
Componente de reproductor de vídeo
Un componente de reproductor de vídeo complejo y de alto contraste con estética de Material Design, adecuado para sitios web de viajes y turismo. Cuenta con diseño responsivo, soporte para modo oscuro y elementos interactivos.