Tailwind CSS List Components

                            <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">
    Featured articles this week
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start 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-1504711434969-e33886168f5c?w=200" alt="Tech News"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">The Future of AI Development</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Technology Insights</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      Artificial intelligence continues to evolve at a rapid pace, transforming industries and creating new opportunities for innovation. Experts predict significant advancements in natural language processing and computer vision in the coming years.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start 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-1522202176988-66273c2fd55f?w=200" alt="Business"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">Remote Work Trends in 2023</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Workplace Culture</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      The shift to remote work continues to shape how companies operate and hire talent. This article explores the latest trends in distributed teams, hybrid work models, and the technologies enabling better collaboration across distances.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
  
  <li class="grid grid-cols-[auto,1fr,auto,auto] items-start 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-1496171367470-9ed9a91ea931?w=200" alt="Design"/>
    </div>
    <div>
      <div class="font-medium text-gray-800">UX Design for Accessibility</div>
      <div class="text-xs uppercase font-semibold text-gray-500">Design Principles</div>
    </div>
    <div class="col-span-4 mt-2 pl-[calc(10px+0.75rem+3px)] pr-4 text-sm text-gray-600">
      Creating inclusive digital experiences is not just a moral imperative but also good business. Learn how leading companies are implementing accessibility-first design approaches to serve all users regardless of ability.
    </div>
    <div class="col-span-4 flex justify-end gap-2 mt-2 pr-4">
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Share
      </button>
      <button class="px-3 py-1 text-xs text-gray-600 hover:text-gray-900 rounded-full hover:bg-gray-100">
        Save
      </button>
    </div>
  </li>
</ul> 
                        

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

                            <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 flex items-center justify-between">
    <span>Recent notifications</span>
    <div class="flex gap-2">
      <button class="text-xs text-blue-600 hover:text-blue-800">Mark all as read</button>
      <button class="text-xs text-blue-600 hover:text-blue-800">Settings</button>
    </div>
  </li>
  
  <li class="border-b border-gray-100 last:border-b-0">
    <div class="grid grid-cols-[auto,1fr,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
      <div class="relative">
        <img class="w-10 h-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200" alt="User 1"/>
        <div class="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 rounded-full border-2 border-white"></div>
      </div>
      <div>
        <div class="font-medium text-gray-800">New message from <span class="font-semibold">Sarah Chen</span></div>
        <div class="text-sm text-gray-600 truncate">Hi there! I wanted to discuss the project timeline for our upcoming release...</div>
        <div class="text-xs text-gray-500 mt-1">2 minutes ago</div>
      </div>
      <div class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" 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">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </div>
    </div>
    <div class="hidden px-4 py-3 bg-gray-50 ml-[calc(10px+0.75rem+3px)] border-t border-gray-100">
      <p class="text-sm text-gray-700 mb-3">
        Hi there! I wanted to discuss the project timeline for our upcoming release. Do you have time for a quick call this afternoon around 3 PM? I have some ideas I'd like to share about the user onboarding flow.
      </p>
      <div class="flex gap-2">
        <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded-md hover:bg-blue-700 transition-colors">
          Reply
        </button>
        <button class="px-3 py-1 bg-gray-200 text-gray-700 text-xs rounded-md hover:bg-gray-300 transition-colors">
          Mark as read
        </button>
      </div>
    </div>
  </li>
  
  <li class="border-b border-gray-100 last:border-b-0">
    <div class="grid grid-cols-[auto,1fr,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
      <div class="relative">
        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
          <svg class="w-5 h-5 text-purple-600" 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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
          </svg>
        </div>
      </div>
      <div>
        <div class="font-medium text-gray-800">Task assigned to you</div>
        <div class="text-sm text-gray-600 truncate">Design review for the new dashboard components</div>
        <div class="text-xs text-gray-500 mt-1">1 hour ago</div>
      </div>
      <div class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" 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">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </div>
    </div>
    <div class="hidden px-4 py-3 bg-gray-50 ml-[calc(10px+0.75rem+3px)] border-t border-gray-100">
      <div class="bg-white p-3 rounded-md border border-gray-200 mb-3">
        <h4 class="font-medium text-gray-800 mb-1">Design review for the new dashboard components</h4>
        <p class="text-sm text-gray-700 mb-2">Please review the attached design files and provide feedback by Friday.</p>
        <div class="flex items-center gap-2 text-blue-600 text-sm">
          <svg class="w-4 h-4" 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
          <span>dashboard_components_v2.fig</span>
        </div>
      </div>
      <div class="flex gap-2">
        <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded-md hover:bg-blue-700 transition-colors">
          Accept
        </button>
        <button class="px-3 py-1 bg-gray-200 text-gray-700 text-xs rounded-md hover:bg-gray-300 transition-colors">
          Decline
        </button>
      </div>
    </div>
  </li>
  
  <li class="border-b border-gray-100 last:border-b-0">
    <div class="grid grid-cols-[auto,1fr,auto] items-start gap-3 px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer" onclick="this.nextElementSibling.classList.toggle('hidden')">
      <div class="relative">
        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
          <svg class="w-5 h-5 text-green-600" 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">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
      </div>
      <div>
        <div class="font-medium text-gray-800">Project milestone completed</div>
        <div class="text-sm text-gray-600 truncate">User authentication system has been successfully implemented</div>
        <div class="text-xs text-gray-500 mt-1">Yesterday at 3:45 PM</div>
      </div>
      <div class="flex items-center">
        <svg class="w-5 h-5 text-gray-400" 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">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </div>
    </div>
    <div class="hidden px-4 py-3 bg-gray-50 ml-[calc(10px+0.75rem+3px)] border-t border-gray-100">
      <div class="flex items-center gap-2 mb-2">
        <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
          <svg class="w-3 h-3 text-green-600" 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">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
        <span class="text-sm font-medium text-gray-700">All tasks complete</span>
      </div>
      <ul class="text-sm text-gray-700 space-y-1 mb-3 ml-8">
        <li class="flex items-center gap-2">
          <svg class="w-3 h-3 text-green-600" 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">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>OAuth integration</span>
        </li>
        <li class="flex items-center gap-2">
          <svg class="w-3 h-3 text-green-600" 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">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>Password reset functionality</span>
        </li>
        <li class="flex items-center gap-2">
          <svg class="w-3 h-3 text-green-600" 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">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>User role management</span>
        </li>
      </ul>
      <div class="flex gap-2">
        <button class="px-3 py-1 bg-blue-600 text-white text-xs rounded-md hover:bg-blue-700 transition-colors">
          View details
        </button>
        <button class="px-3 py-1 bg-gray-200 text-gray-700 text-xs rounded-md hover:bg-gray-300 transition-colors">
          Share
        </button>
      </div>
    </div>
  </li>
</ul>

<script>
  // This script will be needed for the interactive component
  // but we're including it inline as per the requirements
</script> 
                        

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