Notification Slide UI

<div class="w-80 h-full bg-white border-l border-slate-200 p-6 shadow-2xl overflow-y-auto">
        <div class="flex items-center justify-between mb-8">
            <h3 class="font-bold text-lg text-slate-900">Notifications</h3>
            <span class="text-xs font-bold text-indigo-600 cursor-pointer hover:underline">Mark all read</span>
        </div>
        <div class="space-y-6">
            <div class="flex gap-4">
                <div class="w-10 h-10 rounded-full bg-slate-100 shrink-0"></div>
                <div>
                    <p class="text-sm font-medium text-slate-700"><strong class="text-slate-900">Jordan</strong> invited
                        you to <strong class="text-slate-900">Project X</strong></p>
                    <p class="text-xs text-slate-400 mt-1">2 mins ago</p>
                </div>
            </div>
            <div class="flex gap-4">
                <div class="w-10 h-10 rounded-full bg-slate-100 shrink-0"></div>
                <div>
                    <p class="text-sm font-medium text-slate-700">Weekly report is ready for download.</p>
                    <p class="text-xs text-slate-400 mt-1">1 hour ago</p>
                </div>
            </div>
        </div>
    </div>