Robot
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>