Notification With Avatar

<!--
  Single notification with an actor avatar. The avatar is initials, not a remote
  image, so it always renders and never leaks a request. Unread is BOTH a dot and
  an sr-only "Unread" word - a coloured dot on its own is colour-only signalling.
  The row is flex + min-w-0 so the text wraps under the avatar at 320px.
-->
<div class="flex w-full max-w-md items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
  <span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200" aria-hidden="true">DA</span>
  <div class="min-w-0 flex-1">
    <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-semibold">Dana Okoro</span> mentioned you in <span class="font-semibold">Sprint notes</span></p>
    <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">5m ago</p>
  </div>
  <span class="mt-1.5 h-2 w-2 flex-none rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
  <span class="sr-only">Unread</span>
</div>