-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtailwind-file-upload-form.html
128 lines (123 loc) · 4.99 KB
/
tailwind-file-upload-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div class="flex items-center justify-center p-12">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<div class="mx-auto w-full max-w-[550px] bg-white">
<form
class="py-6 px-9"
action="https://formbold.com/s/FORM_ID"
method="POST"
>
<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="[email protected]"
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>