elreco
<body class="bg-cyan-500 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
<div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full">
<h1 class="text-2xl font-bold mb-6 text-center">Music Player</h1>
<div class="flex flex-col items-center">
<div class="w-32 h-32 bg-gray-300 rounded-full mb-4 flex items-center justify-center">
<i class="iconoir-music text-4xl text-gray-700"></i>
</div>
<div class="text-center mb-4">
<p class="text-xl font-bold">Song Title</p>
<p class="text-gray-600">Artist Name</p>
</div>
<div class="flex items-center space-x-4 mb-4">
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-skip-prev text-2xl"></i>
</button>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-play text-2xl"></i>
</button>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-skip-next text-2xl"></i>
</button>
</div>
<div class="flex items-center space-x-4 mb-6">
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-volume-down text-2xl"></i>
</button>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-volume-up text-2xl"></i>
</button>
</div>
<div class="w-full">
<h2 class="text-xl font-bold mb-4">Playlist</h2>
<ul class="space-y-2">
<li class="flex items-center justify-between p-2 bg-gray-100 rounded hover:bg-gray-200">
<div>
<p class="font-bold">Song Title 1</p>
<p class="text-sm text-gray-600">Artist Name 1</p>
</div>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-play text-xl"></i>
</button>
</li>
<li class="flex items-center justify-between p-2 bg-gray-100 rounded hover:bg-gray-200">
<div>
<p class="font-bold">Song Title 2</p>
<p class="text-sm text-gray-600">Artist Name 2</p>
</div>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-play text-xl"></i>
</button>
</li>
<li class="flex items-center justify-between p-2 bg-gray-100 rounded hover:bg-gray-200">
<div>
<p class="font-bold">Song Title 3</p>
<p class="text-sm text-gray-600">Artist Name 3</p>
</div>
<button class="text-gray-700 hover:text-gray-900">
<i class="iconoir-play text-xl"></i>
</button>
</li>
</ul>
</div>
</div>
</div>
</body>