Code Project File Tree

<!-- The panel paints its own dark surface, so it reads the same on a light or
     dark page and needs no dark: variants. The open file is marked with both a
     background and aria-current so it is not signalled by colour alone. -->
<nav class="w-full max-w-xs overflow-hidden rounded-xl border border-gray-800 bg-gray-900 text-sm">
  <p class="border-b border-gray-800 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-400">Explorer</p>
  <ul role="tree" aria-label="Explorer" class="space-y-0.5 p-2">
    <li role="treeitem" aria-expanded="true">
      <button type="button" class="flex w-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-gray-200 hover:bg-white/5">
        <svg viewBox="0 0 16 16" fill="currentColor" class="h-3.5 w-3.5 shrink-0 rotate-90 text-gray-500" aria-hidden="true"><path d="M6 4l4 4-4 4z"/></svg>
        <span class="truncate font-medium uppercase tracking-wide text-gray-300">src</span>
      </button>
      <ul role="group" class="ml-3 space-y-0.5 border-l border-white/10 pl-2 sm:ml-4">
        <li role="treeitem" aria-current="true"><span class="flex min-w-0 items-center gap-1.5 rounded-md border-l-2 border-blue-400 bg-white/10 px-2 py-1.5 text-white"><span class="w-3.5 shrink-0"></span><svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-gray-500" aria-hidden="true"><path d="M4 1.5h4.6L13 5.9V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5z"/></svg><span class="truncate">router.tsx</span></span></li>
      </ul>
    </li>
  </ul>
</nav>