<!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.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
