Two-Line Inbox List

<!--
  Three text spans compete for one line: sender, subject and time. The time is
  shrink-0 so it never truncates (a half-clipped timestamp is useless); sender
  and subject each get min-w-0 + truncate. The preview line is the row's third
  tier and hides below sm - on a phone the subject is enough. The unread dot is
  a redundant cue: the sender also goes bold, so colour is not the only signal.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Inbox">
  <li>
    <a href="#" class="flex gap-3 px-4 py-3 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
      <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-blue-600 dark:bg-blue-400" aria-label="Unread"></span>
      <span class="min-w-0 flex-1">
        <span class="flex items-baseline justify-between gap-2">
          <span class="min-w-0 truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Stripe</span>
          <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">9:41 AM</span>
        </span>
        <span class="mt-0.5 block truncate text-sm text-gray-700 dark:text-gray-300">Your payout is on the way</span>
        <span class="mt-0.5 hidden truncate text-xs text-gray-500 sm:block dark:text-gray-400">$4,208.00 will arrive in your account within 2 business days.</span>
      </span>
    </a>
  </li>
</ul>