This repository was archived by the owner on Jan 23, 2025. It is now read-only.
forked from TailGrids/tailgrids
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathform-elements.html
More file actions
154 lines (154 loc) 路 6.7 KB
/
Copy pathform-elements.html
File metadata and controls
154 lines (154 loc) 路 6.7 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Elements | TailGrids</title>
<link
rel="shortcut icon"
href="assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Form Elements Section Start -->
<section class="pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]">
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Default Input
</label>
<input
type="text"
placeholder="Default Input"
class="w-full rounded-md border border-stroke bg-transparent px-5 py-[10px] text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:border-gray-2 disabled:bg-gray-2 dark:border-dark-3"
/>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Active Input
</label>
<input
type="text"
placeholder="Active Input"
class="w-full rounded-md border border-primary bg-transparent px-5 py-[10px] text-dark-5 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:border-gray-2 disabled:bg-gray-2"
/>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Disabled label
</label>
<input
type="text"
placeholder="Disabled Input"
disabled
class="w-full rounded-md border border-stroke px-5 py-[10px] text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:border-gray-2 disabled:bg-gray-2 dark:border-dark-3"
/>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Default textarea
</label>
<textarea
rows="5"
placeholder="Default textarea"
class="w-full rounded-md border border-stroke bg-transparent p-5 text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3"
></textarea>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Active textarea
</label>
<textarea
rows="5"
placeholder="Active textarea"
class="w-full rounded-md border border-primary bg-transparent p-5 text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2"
></textarea>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Disabled textarea
</label>
<textarea
rows="5"
placeholder="Disabled textarea"
disabled
class="w-full rounded-md border border-stroke p-5 text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3"
></textarea>
</div>
</div>
<div class="w-full px-4 lg:w-5/12">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Default file input
</label>
<input
type="file"
class="w-full cursor-pointer rounded-md border border-stroke text-dark-6 outline-none transition file:mr-5 file:border-collapse file:cursor-pointer file:border-0 file:border-r file:border-solid file:border-stroke file:bg-gray-2 file:px-5 file:py-3 file:text-body-color file:hover:bg-primary file:hover:bg-opacity-10 focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:file:border-dark-3 dark:file:bg-dark-2 dark:file:text-dark-6"
/>
</div>
</div>
<div class="w-full px-4 lg:w-5/12">
<div class="mb-12">
<label
for=""
class="mb-[10px] block text-base font-medium text-dark dark:text-white"
>
Default Select
</label>
<div class="relative z-20">
<select
class="relative z-20 w-full appearance-none rounded-lg border border-stroke bg-transparent px-5 py-[10px] text-dark-6 outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3"
>
<option value="" class="dark:bg-dark-2">Option</option>
<option value="" class="dark:bg-dark-2">Option</option>
<option value="" class="dark:bg-dark-2">Option</option>
</select>
<span
class="absolute right-4 top-1/2 z-10 mt-[-2px] h-[10px] w-[10px] -translate-y-1/2 rotate-45 border-b-2 border-r-2 border-body-color"
>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Form Elements Section End -->
</body>
</html>