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

Drag and drop image upload with image preview

Author:
Santos78

2 years ago

21.9k
File input

Author:
Anonymous

1 year ago

6.8k
Select input

Author:
Sophia Baker

2 years ago

13.3k
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

163
Console like input field

Author:
Charlotte Dupont

2 years ago

11.1k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

5 months ago

1.1k
Maintenance mode

Author:
Maxim

1 year ago

3.3k
File upload form

Author:
Lukas Müller

2 years ago

13k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k
Sign in / Login Form

Author:
Bunny

3 years ago

13k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.6k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components