Basic Dropzone

<!--
  Static resting state. The drag-over highlight and the picked-file list live
  in the React/TypeScript tabs - markup alone cannot read a FileList. What the
  markup CAN get right is the accessibility spine: the input is sr-only, not
  display:none, so it keeps its tab stop, and the zone's focus-within ring
  shows exactly where that focus is.
-->
<div class="w-full max-w-xl">
  <div class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:focus-within:ring-blue-400 dark:focus-within:ring-offset-gray-950">
    <input id="dropzone-input" type="file" multiple aria-describedby="dropzone-hint" class="sr-only" />
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 16V4m0 0 4 4m-4-4-4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
    </svg>
    <p class="mt-3 text-sm font-medium text-gray-900 dark:text-gray-100">Drag and drop files here</p>
    <label for="dropzone-input" class="mt-1 inline-block cursor-pointer text-sm font-semibold text-blue-700 underline underline-offset-2 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
      or browse your computer
    </label>
    <p id="dropzone-hint" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
      Any file type, any size.
    </p>
  </div>
</div>