Centro de notificaciones

<div class="uv-onc"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-label="Notificaciones"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg><b class="bd">2</b></button><div class="scr"></div><div class="pn" role="dialog" aria-label="Notificaciones"><header><b>Notificaciones</b><button type="button" class="rd">Marcar como leídas</button></header><div class="tb" role="tablist"><button type="button" role="tab" aria-selected="true">Todas</button><button type="button" role="tab" aria-selected="false">Menciones</button></div><ul><li class="un me"><span class="av" style="--c:#ec4899">M</span><span class="tx"><span>Marta te ha mencionado en «Rediseño»</span><small>hace 2 min</small></span><i aria-label="Sin leer"></i></li><li class="un"><span class="av" style="--c:#3b82f6">I</span><span class="tx"><span>Tu informe semanal está listo</span><small>hace 1 h</small></span><i aria-label="Sin leer"></i></li><li class=""><span class="av" style="--c:#10b981">J</span><span class="tx"><span>Javier ha aceptado la invitación</span><small>ayer</small></span><i aria-label="Sin leer"></i></li><li class=""><span class="av" style="--c:#f59e0b">P</span><span class="tx"><span>Pago de octubre recibido</span><small>hace 2 días</small></span><i aria-label="Sin leer"></i></li></ul></div></div>