레트로 비디오 플레이어 컴포넌트
레트로/빈티지 미학으로 디자인된 인터랙티브 비디오 플레이어 구성 요소로, 그레이스케일 색 구성표와 전자 상거래에 적합한 여러 인터랙티브 요소를 특징으로 하며 다크 모드를 지원합니다.
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>