비디오 플레이어 구성 요소
어두운 테마를 지원하는 잔인함 스타일로 설계된 반응형 비디오 플레이어 구성 요소입니다. 스타일링을 위해 Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 포함하는 높은 대비와 대담한 레이아웃이 특징입니다.
HTML 코드
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold mb-4">Video Player</h2>
<div class="relative mb-4">
<img class="w-full h-auto rounded-lg" src="https://picsum.photos/800/450" alt="Placeholder Video Thumbnail" />
<div class="absolute inset-0 flex items-center justify-center">
<button class="bg-red-600 text-white p-3 rounded-full focus:outline-none">
Play
</button>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<p class="text-lg font-semibold">User Name</p>
<p class="text-sm text-gray-400">Uploaded 2 days ago</p>
</div>
</div>
<div class="flex justify-between text-sm text-gray-400">
<span>1,234 views</span>
<span>20 likes</span>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold">Description</h3>
<p class="text-gray-300 mt-2">This is a brief description of the video content, designed in a bold, raw style that reflects the principles of brutalism.</p>
</div>
</div>관련 구성 요소
Neon_Glow_Video_Player
비즈니스/기업 웹사이트를 위한 간단하고 반응이 빠른 비디오 플레이어 구성 요소로, 네온/글로우 효과와 따뜻한 일몰 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.
비디오 플레이어 구성 요소
Glassmorphism 디자인, Earth tones 색 구성표 및 다크 모드를 지원하는 반응형 비디오 플레이어 구성 요소입니다. 간단한 HTML 및 Tailwind CSS를 사용합니다.