formsBeginner

File Upload Zone

A dashed-border drop zone with browse button for file uploads.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a file upload zone with Tailwind: a large rectangular area with dashed borders, an upload icon centered at the top, a 'Drag and drop your files' message, an 'or' divider, and a 'Browse files' button. Hover state thickens the border or tints the background. Max-width centered.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/file-uploaders/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-file-upload
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-md p-6 w-full">
<label
      for="File"
      class="block rounded border border-gray-300 p-4 text-gray-900 shadow-sm sm:p-6"
    >
      <div class="flex items-center justify-center gap-4">
        <span class="font-medium"> Upload your file(s) </span>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75"
          />
        </svg>
      </div>

      <input multiple type="file" id="File" class="sr-only" />
    </label>
  </div>
</div>