Grouped List With Sticky Headers

<!--
  Sticky headers with zero JS: each group heading is position:sticky top-0 inside
  a scroll container, so it pins while its own rows scroll under it and is pushed
  out by the next heading. The container owns the height and the overflow; the
  page never scrolls sideways. Each row keeps the min-w-0 + truncate defence.
-->
<div class="max-h-72 w-full overflow-y-auto rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900" aria-label="Grouped list" role="group">
  <div class="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95 dark:text-gray-400">A</div>
  <ul class="divide-y divide-gray-100 dark:divide-gray-800">
    <li class="truncate px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100">Amara Okafor</li>
    <li class="truncate px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100">Anders Bakke</li>
  </ul>
  <div class="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95 dark:text-gray-400">B</div>
  <ul class="divide-y divide-gray-100 dark:divide-gray-800">
    <li class="truncate px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100">Bhavesh Ramachandran</li>
  </ul>
</div>