List Basic

                    <ul class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
  <li class="p-4 pb-2 text-xs text-gray-500 tracking-wide font-medium">
    Most played songs this week
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=200" alt="Artist 1"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">Digital Horizons</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Electric Soundscapes</div>
    </div>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="5 3 19 12 5 21 5 3"></polygon>
      </svg>
    </button>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
      </svg>
    </button>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1525362081669-2b476bb628c3?w=200" alt="Artist 2"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">Ambient Dreams</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Moonlight Sonata</div>
    </div>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="5 3 19 12 5 21 5 3"></polygon>
      </svg>
    </button>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
      </svg>
    </button>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div>
      <img class="w-10 h-10 rounded-lg object-cover" src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=200" alt="Artist 3"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">Crystal Visions</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Echoes of Tomorrow</div>
    </div>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="5 3 19 12 5 21 5 3"></polygon>
      </svg>
    </button>
    <button class="p-2 text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
      </svg>
    </button>
  </li>
</ul>