Componente de reproductor de video retro
Un componente de reproductor de video interactivo diseñado con una estética retro / vintage, con un esquema de color en escala de grises y múltiples elementos interactivos adecuados para fines de comercio electrónico, con soporte para modo oscuro.
Código HTML
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<div class="relative video-wrapper">
<video controls class="w-full rounded-lg border border-gray-400" poster="https://picsum.photos/600/300?random=1">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute top-3 right-3 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
<div class="text-gray-200">
<h3 class="text-lg font-bold">Video Title</h3>
<p class="text-sm">Uploaded by User Name</p>
</div>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between items-center">
<button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
<button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Buy Now</button>
</div>
<div class="mt-4">
<p class="text-gray-300 text-sm">Description: This retro video player component is perfect for showcasing video content within an e-commerce platform, evoking nostalgia with its vintage styles.</p>
</div>
</div>
</div>Componentes relacionados
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 video de modo oscuro retro
Un componente de reproductor de video receptivo diseñado para aplicaciones deportivas / fitness, con una paleta de colores retro apagados y soporte completo para el modo oscuro. Incluye vídeo de marcador de posición y controles con una línea de tiempo.
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.