Notification Card

<div class="notif-card">
  <div class="notif-dot"></div>
  <div class="notif-body">
    <div style="font-weight:600;font-size:13px">New message</div>
    <div style="color:#999;font-size:11px;margin-top:2px">2 min ago</div>
  </div>
</div>

.notif-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 220px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  animation: notif-in .5s cubic-bezier(.16,1,.3,1) forwards;
  opacity: 0;
  transform: translateX(-20px);
}
.notif-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes notif-in {
  to { opacity: 1; transform: translateX(0); }
}