Componentes Reproductor de vídeo Componente de reproductor de vídeo

Componente de reproductor de vídeo

Un componente de reproductor de vídeo diseñado con morfismo de vidrio, con un efecto similar al vidrio esmerilado con colores complementarios. Es interactivo y receptivo, adecuado para el consumo de contenido de blog con soporte para temas oscuros.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
        <video class="w-full rounded-lg" 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="mt-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
        </div>
        <div class="flex items-center mt-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

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.

Abrir

Reproductor de vídeo

Componente de reproductor de video con microinteracciones, combinación de colores complementaria, complejidad moderada y diseño receptivo con soporte de tema oscuro para uso de cartera.

Abrir

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.

Abrir