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 7

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
Payment Form

ABDO-SY

1 year ago

2.4k
Maintenance mode

Maxim

2 years ago

4.8k
Simple range slider

Nour Haider

3 years ago

16.4k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

zobaidul kaziex

2 years ago

3.6k
Incentives
tailwind css Incentives

Anonymous

2 years ago

5.9k
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.

SHARIFUL ISLAM

1 year ago

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

Nick Girga

1 year ago

997
Login form

Gopi Yadav

4 years ago

12.1k
test1 اصلي

SHAHAD EIDAH ALHAERTHI

2 years ago

2.7k