오디오 플레이어 구성 요소
트라이어딕 색 구성표와 적당한 복잡성을 가진 브루탈리즘 오디오 플레이어 구성 요소로, 대시보드에 적합합니다. Tailwind CSS로 구현된 어두운 테마 지원과 함께 반응형 디자인이 특징입니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
<div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
<h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
<div class="text-black dark:text-white text-lg font-bold">🔊</div>
</div>
<div class="flex items-center space-x-4 mb-6">
<div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
<img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
</div>
<div class="flex-grow">
<h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
<p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
<div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white text-sm font-semibold">
<span>2:30</span>
<span>-1:45</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏪
</button>
<button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
▶
</button>
<button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
⏩
</button>
</div>
<div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
<div class="flex justify-between items-center mb-2">
<span class="text-black dark:text-white font-bold text-sm">Volume</span>
<span class="text-black dark:text-white text-sm">75%</span>
</div>
<div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
<div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
<div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
</div>
</div>
</div>
</div>