File Upload

Image or file upload card

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

Input

Author Khalid

Tailwind v3.4 3.9k 8

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

Drag and drop image upload with image preview

Santos78

3 years ago

23.7k
File input

Anonymous

2 years ago

8.2k
Product Form - Reverie

S V

1 year ago

1.3k
Range Slider

Alok

4 years ago

14.7k
Image input with preview
Show you a preview of the selected image.

Prajwal Hallale

3 years ago

27.9k
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Muhammad Imran

2 years ago

2.6k
Form with multiple Inputs.

JUGENDRA GANGWAR

3 months ago

607
File upload

Laurits

3 years ago

13.2k
Textarea

Ron Hicks

3 years ago

12.7k
Invalid input detected message
incorrect input notification

Conan Hilton

3 years ago

12.9k
Payment Form

ABDO-SY

1 year ago

2.4k