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.6k
File input

Anonymous

2 years ago

8.2k
Console like input field

Charlotte Dupont

3 years ago

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

SHARIFUL ISLAM

1 year ago

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

Prajwal Hallale

4 years ago

17.1k
Login Form
Login Form

Md. Tofayel islam

2 years ago

2.7k
Toggle button

Matthew Chen

3 years ago

13.4k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

4k
login
html , css

Hacker Development

1 year ago

1.3k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

704
Float Input

Maxim

2 years ago

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