Retro Video Player Component
An interactive video player component designed with a retro/vintage aesthetic, featuring a grayscale color scheme and multiple interactive elements suitable for e-commerce purposes, with dark mode support.
HTML Code
<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>
Related Components
Video Player Component
A retro/vintage styled video player component featuring responsive design and dark mode support using Tailwind CSS.
VideoPlayer
Video Player Component with Material Design style, responsive effects, and dark theme support using Tailwind CSS.
Video Player Component
Video Player Component with Glassmorphism style, Analogous color scheme, and Moderate complexity for Blog/Content purpose, with responsive design and dark theme support using Tailwind CSS. No Javascript.