Home
Khalid
File Upload

File Upload

Image or file upload card

This tailwind example is contributed by Khalid, on 08-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Input

Author Khalid

Fork Fullscreen

<div class="dark:bg-gray-900 bg-gray-100 flex justify-center items-center h-screen">
   <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
      <h2 class="text-3xl font-semibold text-center mb-6 dark:text-white">File Upload</h2>
      <div class="relative border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-md px-6 py-8 text-center">
         <input type="file" class="hidden" id="fileInput">
         <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
         </svg>
         <p class="text-sm text-gray-600 dark:text-gray-400">Drag & Drop your files here or <label for="fileInput" class="cursor-pointer text-blue-500 hover:underline">browse</label> to upload.</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-md w-full mt-6 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-500 dark:focus:ring-opacity-50">Upload</button>
   </div>
</div>

Related Examples