Drag Overlay Card

<!--
  Resting state - the drop overlay is toggled by drag events the markup cannot
  observe, so it lives in the React/TS tabs (there it is aria-hidden and
  pointer-events-none: a visual cue, never a control). The always-present browse
  button below is why the card works with no pointer at all.
-->
<div class="relative w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
  <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Project attachments</h3>
  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Drag files anywhere onto this card, or use the button.</p>
  <div class="mt-4">
    <input id="overlay-input" type="file" multiple class="peer sr-only" />
    <label for="overlay-input" class="inline-flex min-h-10 cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-600 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-blue-400 dark:peer-focus-visible:ring-offset-gray-900">
      Browse files
    </label>
  </div>
</div>