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

3.5k

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

3 years ago

23k
File input

Author:
Anonymous

2 years ago

7.5k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

11 months ago

1.5k
Search input

Author:
Leon Bachmann

3 years ago

10.9k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

3.5k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3k
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.9k
File upload input section with file preview

Author:
Noob

3 years ago

12.3k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9k
Float Input

Author:
Maxim

2 years ago

4.2k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.5k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

17k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components