Upload File Using Tailwind UI
A Form Upload File Feature designed with Tailwind offers users a seamless and visually appealing method for uploading files, facilitating data submission and management with ease.
form
Loading component...
174 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/11042744-Upload-File -->
<section class="max-w-4xl px-8 md:px-0 mx-auto">
<div class="mx-auto mb-4 mt-10">
<h1 class="font-bold text-xl ml-2">Upload file</h1>
</div>
<div class="relative border-2 border-gray-300 border-dashed rounded-xl p-6 mx-auto mb-10">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 z-50" />
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12 mx-auto opacity-50">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<h3 class="mt-2 font-medium">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-xl text-gray-800 font-semibold">Drag and drop file here</span>
<br>
<small class="mb-2 text-gray-400">File supported: PDF, XSLS, Image, Scanner</small>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
<br>
<button
class="px-6 py-3 bg-blue-500 hover:bg-blue-800 rounded text-base font-medium mt-4 text-white">Choose
File</button>
<br>
<span class="text-sm font-medium text-gray-400">Maximun sixe: 5MB</span>
</label>
</h3>
</div>
</div>
</section>
<section class="max-w-4xl px-8 md:px-0 mx-auto">
<div class=" mx-auto mb-4 mt-10">
<h1 class="font-bold text-xl ml-2">Upload file</h1>
</div>
<div class=" relative border-2 border-gray-300 border-dashed rounded-xl p-6 mx-auto">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 z-50 mx-auto text-center" />
<h3 class="mt-2 font-medium ">
<label for="file-upload" class="relative cursor-pointer ">
<span class="text-lg text-gray-400 font-medium">
<div class="text-center flex flex-row items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 opacity-50 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Drag and drop file here or
</span>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
<button
class="px-3 underline py-1 text-blue-500 hover:text-blue-800 rounded text-base font-medium ml-1">Choose
File</button>
</label>
</h3>
</div>
<div class="flex items-center justify-between mx-auto mt-10">
<small class="mb-2 text-gray-400">File supported: PDF, XSLS, Image, Scanner</small>
<span class="text-sm font-medium text-gray-400">Maximun sixe: 5MB</span>
</div>
</section>
<section
class="flex flex-nowrap mb-10 sm:flex-wrap lg:flex-nowrap flex-col sm:flex-row px-8 md:px-0 max-w-4xl mx-auto items-center justify-center space-x-0 sm:space-x-4 space-y-4 sm:space-y-0">
<div class="w-full sm:w-1/3">
<div class="mx-auto mb-4">
<h1 class="font-bold text-xl ml-2">Upload file</h1>
</div>
<div class="relative border-2 border-gray-300 border-dashed rounded-xl p-6 mx-auto">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 z-50" />
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12 mx-auto opacity-50">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<h3 class="mt-2 font-medium">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-xl text-gray-800 font-semibold">Drag and drop file here</span>
<br>
<small class="mb-2 text-gray-400">File supported: PDF, XSLS, Image, Scanner</small>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
<br>
<button
class="px-6 py-2 bg-blue-200 hover:bg-blue-400 rounded text-base font-medium mt-4 text-blue-600">
Browse
</button>
<br>
<span class="text-sm font-medium text-gray-400">Maximun sixe: 5MB</span>
</label>
</h3>
</div>
</div>
</div>
<div class="w-full sm:w-1/3">
<div class="mx-auto mb-4">
<h1 class="font-bold text-xl ml-2">Upload file</h1>
</div>
<div class="relative border-2 border-gray-300 border-dashed rounded-xl p-6 mx-auto">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 z-50" />
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12 mx-auto opacity-50">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<h3 class="mt-2 font-medium">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-xl text-gray-800 font-semibold">Drag and drop file here</span>
<br>
<small class="mb-2 text-gray-400">File supported: PDF, XSLS, Image, Scanner</small>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
<br>
<button
class="px-6 py-2 bg-gray-200 hover:bg-gray-400 rounded text-base font-medium mt-4 text-gray-600">Choose
File</button>
<br>
<span class="text-sm font-medium text-gray-400">Maximun sixe: 5MB</span>
</label>
</h3>
</div>
</div>
</div>
<div class="w-full sm:w-1/3">
<div class="mx-auto mb-4">
<h1 class="font-bold text-xl ml-2">Upload file</h1>
</div>
<div class="relative border-2 border-gray-300 border-dashed rounded-xl p-6 mx-auto">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 z-50" />
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-12 h-12 mx-auto opacity-50">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
<h3 class="mt-2 font-medium">
<label for="file-upload" class="relative cursor-pointer">
<span class="text-xl text-gray-800 font-semibold">Drag and drop file here</span>
<br>
<small class="mb-2 text-gray-400">File supported: PDF, XSLS, Image, Scanner</small>
<input id="file-upload" name="file-upload" type="file" class="sr-only">
<br>
<button
class="px-6 py-2 bg-blue-500 hover:bg-blue-800 rounded text-base font-medium mt-4 text-white">
Browse
</button>
<br>
<span class="text-sm font-medium text-gray-400">Maximun sixe: 5MB</span>
</label>
</h3>
</div>
</div>
</div>
</section>