List With Grow

                    <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">
    Project tasks status
  </li>
  
  <li class="grid grid-cols-[1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div class="flex items-center gap-3">
      <div class="w-2 h-2 rounded-full bg-green-500"></div>
      <div class="font-medium text-gray-800">Website redesign - Homepage layout</div>
    </div>
    <div class="text-sm text-gray-500">Completed</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">
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </button>
  </li>
  
  <li class="grid grid-cols-[1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div class="flex items-center gap-3">
      <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
      <div class="font-medium text-gray-800">API integration with payment gateway</div>
    </div>
    <div class="text-sm text-gray-500">In progress</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">
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </button>
  </li>
  
  <li class="grid grid-cols-[1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div class="flex items-center gap-3">
      <div class="w-2 h-2 rounded-full bg-blue-500"></div>
      <div class="font-medium text-gray-800">User account settings page</div>
    </div>
    <div class="text-sm text-gray-500">Todo</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">
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </button>
  </li>
  
  <li class="grid grid-cols-[1fr,auto,auto] items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
    <div class="flex items-center gap-3">
      <div class="w-2 h-2 rounded-full bg-red-500"></div>
      <div class="font-medium text-gray-800">Database optimization for search queries</div>
    </div>
    <div class="text-sm text-gray-500">Blocked</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">
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </button>
  </li>
</ul>