브루탈리스트 오디오 플레이어
반응형 디자인, 다크 모드 지원 및 JavaScript가 없는 브루탈리스트 오디오 플레이어 구성 요소입니다.
HTML 코드
<div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
<div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
<div class="p-6">
<h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
<div class="flex items-center mb-6">
<img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
<div>
<p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
<p class="text-black dark:text-white">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white mb-6">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="flex justify-center space-x-6">
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
</div>
</div>
</div>
</div>