<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center mt-4">
<!-- Author: FormBold Team -->
<div class="mx-auto w-full max-w-[550px] bg-white">
<form class="py-4 px-9">
<div class="mb-5">
<label for="email" class="mb-3 block text-base font-medium text-[#07074D]">
Send files to this email:
</label>
<input type="email" name="email" id="email" placeholder="example@domain.com"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md" />
</div>
<div class="mb-6 pt-4">
<label class="mb-5 block text-xl font-semibold text-[#07074D]">
Upload File
</label>
<div class="mb-8">
<input type="file" name="file" id="file" class="sr-only" />
<label for="file"
class="relative flex min-h-[200px] items-center justify-center rounded-md border border-dashed border-[#e0e0e0] p-12 text-center">
<div>
<span class="mb-2 block text-xl font-semibold text-[#07074D]">
Drop files here
</span>
<span class="mb-2 block text-base font-medium text-[#6B7280]">
Or
</span>
<span
class="inline-flex rounded border border-[#e0e0e0] py-2 px-7 text-base font-medium text-[#07074D]">
Browse
</span>
</div>
</label>
</div>
<div class="mb-5 rounded-md bg-[#F5F7FB] py-4 px-8">
<div class="flex items-center justify-between">
<span class="truncate pr-3 text-base font-medium text-[#07074D]">
banner-design.png
</span>
<button class="text-[#07074D]">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z"
fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
<div class="rounded-md bg-[#F5F7FB] py-4 px-8">
<div class="flex items-center justify-between">
<span class="truncate pr-3 text-base font-medium text-[#07074D]">
banner-design.png
</span>
<button class="text-[#07074D]">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z"
fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="relative mt-5 h-[6px] w-full rounded-lg bg-[#E2E5EF]">
<div class="absolute left-0 right-0 h-full w-[75%] rounded-lg bg-[#6A64F1]"></div>
</div>
</div>
</div>
<div>
<button
class="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
Send File
</button>
</div>
</form>
</div>
</div>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a visually appealing and user-friendly file upload form that allows users to easily select and upload files. The form includes a drag-and-drop area for convenient file selection, a progress bar to indicate upload status, and a customizable design to match your website's aesthetics.
Key Features:
- Drag-and-Drop Functionality: Users can simply drag and drop files onto the designated area to upload them.
- Progress Bar: A progress bar visually indicates the upload progress, providing feedback to the user.
- Customizable Styling: Easily modify the appearance of the file upload form using Tailwind CSS utility classes to match your website's design and branding.
- Error Handling: The form can include error handling to provide feedback to users if there are issues with file uploads, such as invalid file types or size restrictions.
- Multiple File Uploads: Allow users to upload multiple files simultaneously by configuring the form to accept multiple file selections.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the file upload form, including the input field, drag-and-drop area, progress bar, and submit button.
- Apply Tailwind CSS Classes: Use Tailwind CSS utility classes to style the file upload form and its elements, such as form, input, progress, btn, and any other relevant classes.
- Implement JavaScript for Functionality: Add JavaScript code to handle the file upload process, including drag-and-drop functionality, progress bar updates, and error handling. You may use libraries like jQuery or native JavaScript for this purpose.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
