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

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

23.2k
File input

Author:
Anonymous

2 years ago

7.7k
Large File upload input

Author:
Akshay

3 years ago

14.7k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

1 year ago

771
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6.7k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

11 months ago

1k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 year ago

2k
File upload input section with file preview

Author:
Noob

3 years ago

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

Author:
Nick Girga

11 months ago

666
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.6k
File input field

Author:
Lyra Ravensong

2 years ago

13.6k
File upload input box

Author:
Mohit Prajapati

3 years ago

15k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components