Home
Mohit Prajapati
File upload input box

File upload input box

This tailwind example is contributed by Mohit Prajapati, on 05-Oct-2022. Component is made with Tailwind CSS v3.

14.8k

<label
  class="flex  cursor-pointer appearance-none justify-center rounded-md border border-dashed border-gray-300 bg-white px-3 py-6 text-sm transition hover:border-gray-400 focus:border-solid focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"
  tabindex="0">
  <span for="photo-dropbox" class="flex items-center space-x-2">
    <svg class="h-6 w-6 stroke-gray-400" viewBox="0 0 256 256">
      <path
        d="M96,208H72A56,56,0,0,1,72,96a57.5,57.5,0,0,1,13.9,1.7"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></path>
      <path
        d="M80,128a80,80,0,1,1,144,48"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></path>
      <polyline
        points="118.1 161.9 152 128 185.9 161.9"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
      <line
        x1="152"
        y1="208"
        x2="152"
        y2="128"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
    <span class="text-xs font-medium text-gray-600">
      Drop files to Attach, or
      <span class="text-blue-600 underline">browse</span>
    </span>
  </span>
  <input id="photo-dropbox" type="file" class="sr-only" />
</label>

Related Examples

Drag and drop image upload with image preview

Author:
Santos78

3 years ago

23k
File upload with icon

Author:
Fagundo67

3 years ago

17.8k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

3 years ago

27.5k
File upload form

Author:
Lukas Müller

2 years ago

13.7k
File upload input section with file preview

Author:
Noob

3 years ago

12.3k
Large File upload input

Author:
Akshay

3 years ago

14.7k
File input

Author:
Anonymous

2 years ago

7.5k
File input field

Author:
Lyra Ravensong

2 years ago

13.4k
Textarea

Author:
Ron Hicks

3 years ago

12.2k
File Upload

Author:
Rajesh Maheshwari

11 months ago

1k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
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.

Author:
Ayyamperumal S

1 month ago

50
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components