List Interactive
<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>
Copied to clipboard