File Uploads
Admin file upload forms with removable image media.
<!-- Drag 'n Drop -->
<div class="space-y-2">
<label class="block block ej64t t5ziw vo20k bp13m dark:text-neutral-200">
Upload form
</label>
<div class="kg38v flex r00n9 oo8ro wfm4e ef3uy wiva2 lile3 dark:bg-neutral-800 dark:border-neutral-600">
<div class="lj7mp">
<svg class="zz68c kvliy mx-auto dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr to6ze dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr to6ze dark:fill-neutral-800 dark:stroke-neutral-500"/>
<rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr to6ze dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="to6ze dark:stroke-neutral-500"/>
<circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="to6ze dark:stroke-neutral-500"/>
</svg>
<div class="o1gdb flex flex-wrap r00n9 k8e57 xq1jm">
<span class="jjspw vo20k bp13m dark:text-neutral-200">
Drop your files here or
</span>
<label for="@@browseID" class="relative cursor-pointer oo8ro y2wul rwtxm anx4o ps5iq ymclh pdar8 focus-within:outline-hidden ctwfs saj9v d9bqc dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600">
<span>browse</span>
<input id="@@browseID" type="file" class="ecbnn">
</label>
</div>
<p class="xe8oj cm336 kvliy dark:text-neutral-400">
CSV, XLS, DOCX
</p>
</div>
</div>
</div>
<!-- End Drag 'n Drop -->
<!-- Upload Form -->
<div class="dkhxo a9e51 ucqgh relative i65bn flex flex-col r00n9 items-center lj7mp svopm oo8ro wfm4e ef3uy wiva2 lile3 dark:bg-neutral-800 dark:border-neutral-700">
<div class="flex items-center duzhl">
<span class="vo20k bp13m dark:text-neutral-200">
Drop files here or
</span>
<label for="hs-pro-dumfct" class="cursor-pointer u17ef bneqp decoration rwtxm anx4o az0dp focus:outline-hidden dark:text-blue-500 dark:hover:text-blue-400">
browse files
</label>
<input id="hs-pro-dumfct" type="file" class="ecbnn" name="hs-pro-dumfct">
</div>
<div class="flex flex-wrap r00n9 items-center aygsi">
<!-- Icon Card -->
<label for="hs-pro-dumfctflu" class="group kgyhg vysqq flex flex-col r00n9 items-center zb7az oo8ro lile3 cursor-pointer ksr3h focus:outline-hidden dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-700 dark:hover:border-neutral-600">
<span class="flex hq6gx r00n9 items-center aukwz rjuva bp13m oq0dt dark:bg-neutral-600 dark:text-neutral-200">
<svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 12v6"/><path d="m15 15-3-3-3 3"/></svg>
</span>
<span class="cm336 xq1jm dark:text-neutral-400">
File upload
</span>
</label>
<input id="hs-pro-dumfctflu" type="file" class="ecbnn" name="hs-pro-dumfctflu">
<!-- End Icon Card -->
<!-- Icon Card -->
<label for="hs-pro-dumfctfru" class="group kgyhg vysqq flex flex-col r00n9 items-center zb7az oo8ro lile3 cursor-pointer ksr3h focus:outline-hidden dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-700 dark:hover:border-neutral-600">
<span class="flex hq6gx r00n9 items-center aukwz rjuva bp13m oq0dt dark:bg-neutral-600 dark:text-neutral-200">
<svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>
</span>
<span class="cm336 xq1jm dark:text-neutral-400">
Folder upload
</span>
</label>
<input id="hs-pro-dumfctfru" type="file" class="ecbnn" name="hs-pro-dumfctfru">
<!-- End Icon Card -->
<!-- Icon Card -->
<label for="hs-pro-dumfctdnd" class="group kgyhg vysqq hidden md:flex flex-col r00n9 items-center zb7az oo8ro lile3 cursor-pointer ksr3h focus:outline-hidden dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-700 dark:hover:border-neutral-600">
<span class="flex hq6gx r00n9 items-center aukwz rjuva bp13m oq0dt dark:bg-neutral-600 dark:text-neutral-200">
<svg class="hq6gx ibvs1" 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="cm336 xq1jm dark:text-neutral-400">
Drag-n-Drop
</span>
</label>
<input id="hs-pro-dumfctdnd" type="file" class="ecbnn" name="hs-pro-dumfctdnd">
</div>
</div>
<!-- End Upload Form -->
<!-- Grid -->
<div class="dmfqa mmjp9 n5y6f c9huo">
<!-- Upload Form -->
<label for="hs-pro-pyoruifr" class="pi5e6 ucqgh relative cursor-pointer i65bn flex flex-col r00n9 items-center lj7mp sic3v oo8ro w229a rx8hj wiva2 lile3 tdhmi focus:outline-hidden tme8y dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50">
<span class="ecbnn">Browse</span>
<span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700">
<svg class="hq6gx ca09w" 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="t5ziw t6rrs dark:text-neutral-500">
Upload the front side of your document
</span>
<span class="d0kec vo20k e9qjd rkwi0 dark:text-purple-500">
Choose a file
</span>
<input id="hs-pro-pyoruifr" type="file" class="ecbnn" name="hs-pro-pyoruifr">
</label>
<!-- End Upload Form -->
<!-- Upload Form -->
<label for="hs-pro-pyoruibs" class="pi5e6 ucqgh relative cursor-pointer i65bn flex flex-col r00n9 items-center lj7mp sic3v oo8ro w229a rx8hj wiva2 lile3 tdhmi focus:outline-hidden tme8y dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50">
<span class="ecbnn">Browse</span>
<span class="hq6gx sc50o inline-flex r00n9 items-center agawe bp13m oq0dt group-hover:bg-gray-200 group-focus:bg-gray-200 dark:bg-neutral-800 dark:text-neutral-300 dark:group-hover:bg-neutral-700 dark:group-focus:bg-neutral-700">
<svg class="hq6gx ca09w" 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="t5ziw t6rrs dark:text-neutral-500">
Upload the back side of your document
</span>
<span class="d0kec vo20k e9qjd rkwi0 dark:text-purple-500">
Choose a file
</span>
<input id="hs-pro-pyoruibs" type="file" class="ecbnn" name="hs-pro-pyoruibs">
</label>
<!-- End Upload Form -->
</div>
<!-- End Grid -->
<!-- Media Card -->
<div class="flex flex-col oo8ro wfm4e lh7k3 overflow-hidden lile3 hx4gm dark:bg-neutral-800 dark:border-neutral-700">
<!-- Header -->
<div class="mctd2 blhyt flex uip67 items-center ocl6c ic6aj lh7k3 dark:border-neutral-700">
<h2 class="inline-block y2wul ld4jf dark:text-neutral-200">
Media
</h2>
<div class="flex c9j8j items-center lialp">
<button type="button" class="i7oig rfnst inline-flex items-center vrcxw cm336 vo20k ps5iq wfm4e lh7k3 oo8ro ld4jf hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<svg class="hq6gx stqz8" 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>
<!-- End Header -->
<!-- Body -->
<div class="xlz15 space-y-4">
<!-- Drag 'n Drop -->
<div class="space-y-2">
<label class="hidden ej64t t5ziw vo20k ld4jf dark:text-neutral-200">
Upload images
</label>
<div class="kg38v b2azl flex r00n9 oo8ro wfm4e ef3uy ohiu9 lile3 dark:bg-neutral-800 dark:border-neutral-600">
<div class="lj7mp">
<svg class="zz68c b62jb mx-auto dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
<circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
</svg>
<div class="o1gdb flex flex-wrap r00n9 k8e57 vg3h2">
<span class="jjspw vo20k ld4jf dark:text-neutral-200">
Drop your files here or
</span>
<label for="hs-pro-epdupb" class="relative cursor-pointer oo8ro y2wul f411b klfx7 ps5iq ymclh pdar8 focus-within:outline-hidden ctwfs f2lla d9bqc dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600">
<span>browse</span>
<input id="hs-pro-epdupb" type="file" class="ecbnn" name="hs-pro-deuuf">
</label>
</div>
<p class="xe8oj cm336 b62jb dark:text-neutral-400">
CSV, XLS, DOCX
</p>
</div>
</div>
</div>
<!-- End Drag 'n Drop -->
<p class="t5ziw g30sc dark:text-neutral-500">
Add up to 10 images to your product.
</p>
</div>
<!-- End Body -->
</div>
<!-- End Media Card -->
<!-- Media Card -->
<div class="flex flex-col oo8ro wfm4e lh7k3 overflow-hidden lile3 hx4gm dark:bg-neutral-800 dark:border-neutral-700">
<!-- Header -->
<div class="mctd2 blhyt flex uip67 items-center ocl6c ic6aj lh7k3 dark:border-neutral-700">
<h2 class="inline-block y2wul ld4jf dark:text-neutral-200">
Media
</h2>
<div class="flex c9j8j items-center lialp">
<button type="button" class="i7oig rfnst inline-flex items-center vrcxw cm336 vo20k ps5iq wfm4e lh7k3 oo8ro ld4jf hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<svg class="hq6gx stqz8" 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>
<!-- End Header -->
<!-- Body -->
<div class="xlz15 space-y-4">
<!-- Grid -->
<div class="dmfqa hdv6z rr2iz aygsi">
<!-- Card -->
<div id="dismiss-img1" class="relative">
<div class="hq6gx relative lile3 overflow-hidden i65bn s5mfe">
<img class="lpgt1 absolute ofq05 uv2uj exlm9 lile3" 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 sq9jt cpkvx bo1ta">
<button type="button" class="ezw10 inline-flex r00n9 items-center vrcxw vo20k t5ziw oq0dt wfm4e lh7k3 oo8ro vg3h2 hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img1">
<svg class="hq6gx ibvs1" 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>
<!-- End Card -->
<!-- Card -->
<div id="dismiss-img2" class="relative">
<div class="hq6gx relative lile3 overflow-hidden i65bn s5mfe">
<img class="lpgt1 absolute ofq05 uv2uj exlm9 lile3" 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 sq9jt cpkvx bo1ta">
<button type="button" class="ezw10 inline-flex r00n9 items-center vrcxw vo20k t5ziw oq0dt wfm4e lh7k3 oo8ro vg3h2 hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img2">
<svg class="hq6gx ibvs1" 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>
<!-- End Card -->
<!-- Card -->
<div id="dismiss-img3" class="relative">
<div class="hq6gx relative lile3 overflow-hidden i65bn s5mfe">
<img class="lpgt1 absolute ofq05 uv2uj exlm9 lile3" 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 sq9jt cpkvx bo1ta">
<button type="button" class="ezw10 inline-flex r00n9 items-center vrcxw vo20k t5ziw oq0dt wfm4e lh7k3 oo8ro vg3h2 hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img3">
<svg class="hq6gx ibvs1" 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>
<!-- End Card -->
<!-- Card -->
<div id="dismiss-img4" class="relative">
<div class="hq6gx relative lile3 overflow-hidden i65bn s5mfe">
<img class="lpgt1 absolute ofq05 uv2uj exlm9 lile3" 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 sq9jt cpkvx bo1ta">
<button type="button" class="ezw10 inline-flex r00n9 items-center vrcxw vo20k t5ziw oq0dt wfm4e lh7k3 oo8ro vg3h2 hx4gm mg3yl disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden exitg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-remove-element="#dismiss-img4">
<svg class="hq6gx ibvs1" 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>
<!-- End Card -->
</div>
<!-- End Grid -->
<!-- Drag 'n Drop -->
<div class="space-y-2">
<label class="hidden ej64t t5ziw vo20k ld4jf dark:text-neutral-200">
Upload images
</label>
<div class="kg38v b2azl flex r00n9 oo8ro wfm4e ef3uy ohiu9 lile3 dark:bg-neutral-800 dark:border-neutral-600">
<div class="lj7mp">
<svg class="zz68c b62jb mx-auto dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
<circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
</svg>
<div class="o1gdb flex flex-wrap r00n9 k8e57 vg3h2">
<span class="jjspw vo20k ld4jf dark:text-neutral-200">
Drop your files here or
</span>
<label for="hs-pro-epdupb" class="relative cursor-pointer oo8ro y2wul f411b klfx7 ps5iq ymclh pdar8 focus-within:outline-hidden ctwfs f2lla d9bqc dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600">
<span>browse</span>
<input id="hs-pro-epdupb" type="file" class="ecbnn" name="hs-pro-deuuf">
</label>
</div>
<p class="xe8oj cm336 b62jb dark:text-neutral-400">
CSV, XLS, DOCX
</p>
</div>
</div>
</div>
<!-- End Drag 'n Drop -->
<p class="t5ziw g30sc dark:text-neutral-500">
Add up to 10 images to your product.
</p>
</div>
<!-- End Body -->
</div>
<!-- End Media Card -->
<!-- Import Products Form -->
<div class="oo8ro wfm4e gmbku hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700">
<!-- Header -->
<div class="mctd2 dkhxo flex uip67 items-center ic6aj lh7k3 dark:border-neutral-700">
<h3 class="y2wul ld4jf dark:text-neutral-200">
Add project
</h3>
</div>
<!-- End Header -->
<div class="pi5e6">
<label class="block t5ziw g30sc dark:text-neutral-400">
<a class="t5ziw f411b ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-green-400 dark:hover:text-green-500" href="#">Download a sample CSV template</a> to see an example of the format required.
</label>
<!-- Drag 'n Drop -->
<div class="space-y-2">
<label class="hidden ej64t t5ziw vo20k ld4jf dark:text-neutral-200">
Upload products
</label>
<div class="kg38v b2azl flex r00n9 oo8ro wfm4e ef3uy ohiu9 lile3 dark:bg-neutral-800 dark:border-neutral-600">
<div class="lj7mp">
<svg class="zz68c b62jb mx-auto dark:text-neutral-400" width="70" height="46" viewBox="0 0 70 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<rect x="17.0656" y="1.62305" width="35.8689" height="42.7541" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2" class="mlmpr s65l4 dark:fill-neutral-800 dark:stroke-neutral-500"/>
<path d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
<circle cx="39.5902" cy="14.9672" r="4.16393" stroke="currentColor" stroke-width="2" class="s65l4 dark:stroke-neutral-500"/>
</svg>
<div class="o1gdb flex flex-wrap r00n9 k8e57 vg3h2">
<span class="jjspw vo20k ld4jf dark:text-neutral-200">
Drop your files here or
</span>
<label for="hs-pro-eipb" class="relative cursor-pointer oo8ro y2wul f411b klfx7 ps5iq ymclh pdar8 focus-within:outline-hidden ctwfs f2lla d9bqc dark:bg-neutral-800 dark:text-green-500 dark:hover:text-green-600">
<span>browse</span>
<input id="hs-pro-eipb" type="file" class="ecbnn" name="hs-pro-deuuf">
</label>
</div>
<p class="xe8oj cm336 b62jb dark:text-neutral-400">
CSV, XLS, DOCX
</p>
</div>
</div>
</div>
<!-- End Drag 'n Drop -->
<!-- Checkbox -->
<div class="ymk3i flex">
<input type="checkbox" class="hxyan hq6gx ohiu9 dqdmd f411b omr57 checked:border-green-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-green-500 dark:checked:border-green-500 dark:focus:ring-offset-neutral-800" id="hs-pro-eipoonch">
<label for="hs-pro-eipoonch" class="t5ziw g30sc zg3gw dark:text-neutral-400">
Overwrite any current products that have the same handle. Existing values will be used for any missing columns. <a class="t5ziw f411b ymclh pdar8 vo20k focus:outline-hidden np187 dark:text-green-400 dark:hover:text-green-500" href="#">Learn more</a>
</label>
</div>
<!-- End Checkbox -->
</div>