File Upload

<div class="flex justify-center p-6">
  <div class="w-full max-w-xs space-y-5">
    <label
      class="relative flex h-44 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-center transition focus-within:border-gray-500 hover:border-gray-500"
    >
      <input type="file" multiple class="absolute inset-0 z-10 cursor-pointer opacity-0 focus:outline-0" />
      <div class="flex flex-col items-center">
        <!-- Heroicons name: outline/arrow-up-tray -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-9 text-gray-400"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
          />
        </svg>
        <div class="mt-4 text-sm font-medium text-gray-700">Drag and drop a .pdf file</div>
      </div>
    </label>

    <button
      class="relative inline-flex h-10 w-full items-center justify-center space-x-2 whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent px-4 text-center text-sm font-medium text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
    >
      Select file
    </button>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="w-full max-w-xl">
    <div>
      <div class="mb-2">
        <h4 class="font-semibold text-gray-900">Upload files</h4>
        <p class="mt-0.5 text-xs text-gray-700">
          You can upload up to 5 files. Files can be up to 50MB. You can upload .jpg and .pdf file formats.
        </p>
      </div>
      <label
        for="file"
        class="relative flex h-64 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-center transition hover:border-gray-500"
      >
        <input type="file" id="file" multiple class="absolute inset-0 z-10 cursor-pointer opacity-0 focus:outline-0" />
        <div class="flex flex-col items-center">
          <!-- Heroicons name: outline/arrow-up-tray -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-9 text-gray-400"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
            />
          </svg>
          <div class="mt-4 text-base font-medium text-gray-700">Select a file to upload</div>
          <div class="mt-1 text-sm text-gray-600">or drag and drop here</div>
        </div>
      </label>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="w-full max-w-xl">
    <label class="relative flex h-64 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-center transition">
      <input disabled type="file" multiple class="absolute inset-0 z-10 cursor-pointer opacity-0 focus:outline-0 disabled:pointer-events-none" />
      <div class="flex flex-col items-center">
        <div class="relative inline-block">
          <svg class="size-24 text-indigo-500" viewBox="0 0 36 36">
            <path
              stroke="rgb(226 232 240)"
              stroke-width="2"
              fill="none"
              d="M18 2.0845
                    a 15.9155 15.9155 0 0 1 0 31.831
                    a 15.9155 15.9155 0 0 1 0 -31.831"
            />
            <path
              stroke="currentColor"
              stroke-width="2"
              stroke-dasharray="50, 100"
              stroke-linecap="round"
              fill="none"
              d="M18 2.0845
                    a 15.9155 15.9155 0 0 1 0 31.831
                    a 15.9155 15.9155 0 0 1 0 -31.831"
            />
          </svg>
          <div class="absolute inset-0 flex items-center justify-center text-center text-lg font-medium">50%</div>
        </div>
        <div class="mt-4 text-base font-medium text-gray-700">Uploading file...</div>
        <button
          class="mt-3 inline-flex min-w-20 items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-center text-sm font-medium text-gray-700 transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          Cancel
        </button>
      </div>
    </label>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="w-full max-w-xl">
    <label
      for="file"
      class="relative flex h-64 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-center transition hover:border-gray-500"
    >
      <input type="file" id="file" multiple class="absolute inset-0 z-10 cursor-pointer opacity-0 focus:outline-0" />
      <div class="flex flex-col items-center">
        <!-- Heroicons name: outline/arrow-up-tray -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-9 text-gray-400"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
          />
        </svg>
        <div class="mt-4 text-base font-medium text-gray-700">Select a file to upload</div>
        <div class="mt-1 text-sm text-gray-600">or drag and drop here</div>
      </div>
    </label>

    <div class="mt-4">
      <label for="file-url" class="mb-1.5 block text-sm font-medium text-gray-900">Or upload from a URL</label>
      <div class="relative">
        <input
          id="file-url"
          type="text"
          class="h-10 w-full rounded-lg border border-gray-300 pl-3 pr-24 text-sm placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
          placeholder="Enter file URL"
        />
        <div class="absolute inset-y-0 right-0 flex items-center pr-[5px]">
          <button
            class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1 text-center text-sm font-medium text-gray-700 transition hover:bg-gray-100 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
          >
            Upload
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="w-full max-w-xl">
    <label class="relative flex h-64 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-center transition">
      <input disabled type="file" multiple class="absolute inset-0 z-10 cursor-pointer opacity-0 focus:outline-0 disabled:pointer-events-none" />
      <div class="flex flex-col items-center">
        <div class="relative inline-block">
          <svg class="size-24 text-indigo-500" viewBox="0 0 36 36">
            <path
              stroke="rgb(226 232 240)"
              stroke-width="2"
              fill="none"
              d="M18 2.0845
                    a 15.9155 15.9155 0 0 1 0 31.831
                    a 15.9155 15.9155 0 0 1 0 -31.831"
            />
            <path
              stroke="currentColor"
              stroke-width="2"
              stroke-dasharray="50, 100"
              stroke-linecap="round"
              fill="none"
              d="M18 2.0845
                    a 15.9155 15.9155 0 0 1 0 31.831
                    a 15.9155 15.9155 0 0 1 0 -31.831"
            />
          </svg>
          <div class="absolute inset-0 flex items-center justify-center text-center text-lg font-medium">50%</div>
        </div>
        <div class="mt-4 text-base font-medium text-gray-700">Uploading file...</div>
        <button
          class="mt-3 inline-flex min-w-20 items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-center text-sm font-medium text-gray-700 transition hover:bg-gray-50 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          Cancel
        </button>
      </div>
    </label>

    <div class="mt-4">
      <label for="file-url" class="mb-1.5 block text-sm font-medium text-gray-900">Or upload from a URL</label>
      <div class="relative">
        <input
          id="file-url"
          type="text"
          class="h-10 w-full rounded-lg border border-gray-300 pl-3 pr-24 text-sm placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
          placeholder="Enter file URL"
        />
        <div class="absolute inset-y-0 right-0 flex items-center pr-[5px]">
          <button
            class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1 text-center text-sm font-medium text-gray-700 transition hover:bg-gray-100 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
          >
            Upload
          </button>
        </div>
      </div>
    </div>

    <div class="mt-3 flex space-x-4 px-[5px]">
      <div class="flex w-full items-center">
        <span class="mr-4 whitespace-nowrap font-medium text-gray-600">75%</span>
        <div class="inline-flex h-2 w-full overflow-hidden rounded-full bg-gray-200">
          <span class="rounded-full bg-indigo-500" style="width: 75%"></span>
        </div>
      </div>
      <button
        class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1 text-center text-sm font-medium text-gray-700 transition hover:bg-gray-100 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
      >
        Cancel
      </button>
    </div>
  </div>
</div>