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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <div class="relative w-full max-w-2xl rounded-lg shadow-xl overflow-hidden dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-500 hover:scale-105"> <div class="aspect-w-16 aspect-h-9"> <video controls class="w-full h-full object-cover"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="p-6"> <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Video Title</h3> <p class="text-gray-600 dark:text-gray-300">A brief description of the video content goes here. This is a sample video demonstrating the video player component with a 3D-like feel and monochromatic colors.</p> </div> <div class="absolute inset-0 pointer-events-none"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-transparent to-gray-300 opacity-20 dark:from-gray-700 dark:to-gray-800 rounded-lg"></div> </div> </div></div>Componentes relacionados
Componente de reproductor de vídeo
Un componente de reproductor de video de estilo brutalismo con alto contraste y diseño inusual, con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
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
Componente de reproductor de video receptivo con diseño Glassmorphism, combinación de colores de tonos tierra y compatibilidad con modo oscuro. Utiliza HTML simple y CSS de Tailwind.