레트로 오디오 플레이어
레트로/빈티지 디자인, 파스텔 색 구성표, 복잡한 복잡성, 소셜 미디어 목적, 반응형, 어두운 테마 지원, Tailwind CSS가 있는 HTML 전용 오디오 플레이어 구성 요소
HTML 코드
<div class="bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 p-6 rounded-lg shadow-xl max-w-sm mx-auto font-mono">
<div class="flex justify-between items-center mb-4">
<div class="text-gray-700 dark:text-gray-300 text-sm">NOW PLAYING</div>
<div class="text-gray-700 dark:text-gray-300 text-sm">03:45</div>
</div>
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Album Art">
<div>
<h3 class="text-lg font-bold text-gray-800 dark:text-white">Synthwave Nights</h3>
<p class="text-gray-600 dark:text-gray-400">Neon Rider</p>
</div>
</div>
<div class="relative mb-4">
<div class="h-2 bg-purple-300 dark:bg-purple-600 rounded-full"></div>
<div class="absolute top-0 left-0 h-2 bg-purple-600 dark:bg-purple-300 rounded-full w-3/4"></div>
<div class="absolute -top-1 left-3/4 w-4 h-4 bg-purple-800 dark:bg-purple-100 rounded-full shadow"></div>
</div>
<div class="flex justify-center items-center space-x-6">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
<svg class="w-8 h-8" 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="M15 19l-7-7 7-7"></path></svg>
</button>
<button class="bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-800 rounded-full p-3 shadow-lg hover:bg-purple-600 dark:hover:bg-purple-300 focus:outline-none">
<svg class="w-8 h-8" 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="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V9.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
<svg class="w-8 h-8" 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="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<div class="flex justify-center items-center mt-4 space-x-4 text-gray-700 dark:text-gray-300 text-sm">
<div><svg class="w-5 h-5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
<div><svg class="w-5 h-5" 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.295 10C9.501 6.619 13.305 4 18 4s8.499 2.619 9.705 6M16 18V9m-5 5v4m9-4v4"></path></svg></div>
<div><svg class="w-5 h-5" 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="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2zm7 0V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2z"></path></svg></div>
</div>
</div>