비디오 플레이어 구성 요소
블로그 또는 콘텐츠 소비를 위해 설계된 반응형 비디오 플레이어 구성 요소로, 마이크로 인터랙션과 파스텔 색상 구성표를 사용합니다. 여기에는 재생/일시 중지 기능과 볼륨 컨트롤이 포함됩니다. 이 디자인에는 다크 모드 지원도 포함됩니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
<div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
<span class="text-white">Video Title</span>
<div class="flex items-center">
<button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
</button>
<input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
</div>
</div>