레트로 비디오 플레이어 컴포넌트
레트로/빈티지 미학으로 디자인된 인터랙티브 비디오 플레이어 구성 요소로, 그레이스케일 색 구성표와 전자 상거래에 적합한 여러 인터랙티브 요소를 특징으로 하며 다크 모드를 지원합니다.
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>관련 구성 요소
비디오 플레이어 구성 요소
어두운 테마를 지원하는 잔인함 스타일로 설계된 반응형 비디오 플레이어 구성 요소입니다. 스타일링을 위해 Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 포함하는 높은 대비와 대담한 레이아웃이 특징입니다.
비디오 플레이어 구성 요소
포트폴리오 전시를 위해 설계된 네오모픽 비디오 플레이어 구성 요소로, Tailwind CSS를 사용하여 어두운 테마와 반응형 디자인을 특징으로 합니다.