미니멀리스트 비디오 플레이어
Tailwind CSS를 사용하여 HTML로 코딩된 비디오 플레이어 구성 요소. 대시보드용으로 고안된 그레이스케일 색 구성표를 사용하는 미니멀한 디자인입니다. 여러 대화형 요소가 있는 복잡한 구성 요소이며 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Video Area -->
<div class="relative" style="padding-top: 56.25%;">
<video controls class="absolute top-0 left-0 w-full h-full object-cover">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Controls and Info Area -->
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
<div class="flex items-center space-x-4">
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
</div>
<!-- Play/Pause Button (example - actual video controls are built-in) -->
<div class="flex justify-center">
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
Play
</button>
</div>
<!-- Additional Info/Metadata -->
<div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
<p>Views: 1.2M | Uploaded: 3 days ago</p>
</div>
</div>
</div>
</div>