Tailwind CSS Image Upload Forms Blocks

All Blocks
Application UI
Forms
Image Upload Forms

Image Upload Forms

Image upload forms for product media, gallery uploads, and removable image selections.

Image Upload Card Pro

Media card combines a header action, drag-and-drop upload area, and helper copy.

<div class="flex flex-col bg-card border border-card-line overflow-hidden rounded-xl shadow-2xs">
                      
                      <div class="py-3 px-5 flex justify-between items-center gap-x-5 border-b border-card-header">
                        <h2 class="inline-block font-semibold text-foreground">
                          Media
                        </h2>

<div class="flex justify-end items-center gap-x-2">
                          <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.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="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg>
                            Upload from URL
                          </button>
                        </div>
                      </div>

<div class="p-5 space-y-4">
    
                        
                        <div class="space-y-2">
                          <label class="hidden block mb-2 text-sm font-medium text-foreground">
                            Upload images
                          </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-epdupb" 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-epdupb" type="file" class="sr-only">
                                </label>
                              </div>

<p class="text-sm text-muted-foreground-1">
                          Add up to 10 images to your product.
                        </p>
                      </div>
                      
                    </div>

Open related add product template

Image Upload Card with Removable Media Grid Pro

Removable image grid sits above the upload area inside one bordered media card.

<div class="p-5 space-y-4">
                        
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                          
                          <div id="dismiss-img1" class="relative">
                            <div class="shrink-0 relative rounded-xl overflow-hidden w-full h-44">
                              <img class="size-full absolute top-0 inset-s-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1549298916-f52d724204b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar">
                            </div>
                            <div class="absolute top-2 inset-e-2 z-10">
                              <button type="button" class="size-7 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-remove-element="#dismiss-img1">
                                <svg class="shrink-0 size-4" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>
                          </div>

<div id="dismiss-img2" class="relative">
                            <div class="shrink-0 relative rounded-xl overflow-hidden w-full h-44">
                              <img class="size-full absolute top-0 inset-s-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1549298916-acc8271f8b8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar">
                            </div>
                            <div class="absolute top-2 inset-e-2 z-10">
                              <button type="button" class="size-7 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-remove-element="#dismiss-img2">
                                <svg class="shrink-0 size-4" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>
                          </div>
                          
      
                          
                          <div id="dismiss-img3" class="relative">
                            <div class="shrink-0 relative rounded-xl overflow-hidden w-full h-44">
                              <img class="size-full absolute top-0 inset-s-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1549298916-c6c5f85fa167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar">
                            </div>
                            <div class="absolute top-2 inset-e-2 z-10">
                              <button type="button" class="size-7 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-remove-element="#dismiss-img3">
                                <svg class="shrink-0 size-4" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>
                          </div>
                          
      
                          
                          <div id="dismiss-img4" class="relative">
                            <div class="shrink-0 relative rounded-xl overflow-hidden w-full h-44">
                              <img class="size-full absolute top-0 inset-s-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&q=80" alt="Avatar">
                            </div>
                            <div class="absolute top-2 inset-e-2 z-10">
                              <button type="button" class="size-7 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-remove-element="#dismiss-img4">
                                <svg class="shrink-0 size-4" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>
                          </div>
                          
                        </div>
                        
    
                        
                        <div class="space-y-2">
                          <label class="hidden block mb-2 text-sm font-medium text-foreground">
                            Upload images
                          </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>

Open related product details template