Tailwind CSS Document & Import Uploads Blocks

All Blocks
Application UI
Forms
Document & Import Uploads

Document & Import Uploads

Document verification and import upload forms for IDs, CSVs, and structured upload workflows.

Front and Back Document Upload Pro

Two matching upload panels sit side by side for front and back document files.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      
                      <label for="hs-pro-pyoruifr" class="p-4 min-h-56 relative cursor-pointer w-full flex flex-col justify-center items-center text-center gap-y-3 bg-layer border-2 border-dotted border-line-3 rounded-xl hover:border-line-4 focus:outline-hidden focus:border-line-4">
                        <span class="sr-only">Browse</span>
                        <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                        </span>
                        <span class="text-sm text-muted-foreground-1">
                          Upload the front side of your document
                        </span>
                        <span class="py-1 font-medium text-[13px] text-primary">
                          Choose a file
                        </span>
                        <input id="hs-pro-pyoruifr" type="file" class="sr-only" name="hs-pro-pyoruifr">
                      </label>

<label for="hs-pro-pyoruibs" class="p-4 min-h-56 relative cursor-pointer w-full flex flex-col justify-center items-center text-center gap-y-3 bg-layer border-2 border-dotted border-line-3 rounded-xl hover:border-line-4 focus:outline-hidden focus:border-line-4">
                        <span class="sr-only">Browse</span>
                        <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                        </span>
                        <span class="text-sm text-muted-foreground-1">
                          Upload the back side of your document
                        </span>
                        <span class="py-1 font-medium text-[13px] text-primary">
                          Choose a file
                        </span>
                        <input id="hs-pro-pyoruibs" type="file" class="sr-only" name="hs-pro-pyoruibs">
                      </label>
                      
                    </div>

Open related upload identity template

Import Upload Form with Overwrite Checkbox Pro

Compact upload card pairs a sample-file link with one import option checkbox.

<div class="bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2  class="font-medium text-foreground">
      Add project
    </h2>
  </div>

<div class="p-4">
    <label class="block mb-2 text-sm text-muted-foreground-1">
      <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Download a sample CSV template</a> to see an example of the format required.
    </label>

<div class="space-y-2">
      <label class="hidden block mb-2 text-sm font-medium text-foreground">
        Upload products
      </label>
      <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
        <div class="text-center">
          <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
          </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
            <span class="pe-1 font-medium text-foreground">
              Drop your files here or
            </span>
            <label for="hs-pro-eipb" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
              <span>browse</span>
              <input id="hs-pro-eipb" type="file" class="sr-only">
            </label>
          </div>

<div class="mt-3 flex">
      <input type="checkbox" class="mt-0.5 shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-eipoonch">
      <label for="hs-pro-eipoonch" class="ms-3 text-sm text-muted-foreground-1">
        Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Learn more</a>
      </label>
    </div>
    
  </div>
</div>

Open related products page