tailwind-float-label/index.html at master · unlight/tailwind-float-label · GitHub

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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./tailwind.css" />
    <title>Tailwind float label</title>
  </head>
  <body class="bg-gray-100 flex justify-center p-4">
    <div class="bg-white p-8 rounded-lg max-w-3xl flex flex-row gap-x-4">
      <form class="space-y-4 flex-1/2">
        <h1 class="text-xl font-bold mb-4 text-gray-800">
          Float Labels Example
        </h1>
        <div class="float-container">
          <label for="fullname" class="float-label px-2 text-gray-600"
            >Full Name</label
          >
          <input
            type="text"
            id="fullname"
            class="float-input w-full px-3 py-2 border border-gray-300"
            placeholder="Full Name placeholder"
          />
        </div>

        <div class="float-container float-always">
          <label for="sticky" class="float-label px-2 text-gray-600"
            >Sticky (sticky)</label
          >
          <input
            type="text"
            id="sticky"
            class="float-input w-full px-3 py-2 border border-gray-300"
            placeholder="Sticky ph"
          />
        </div>

        <div class="float-container">
          <label for="email" class="float-label px-2 text-gray-600"
            >Email Address (2: is focused)</label
          >
          <input
            type="email"
            id="email"
            class="float-input w-full px-3 py-2 border border-gray-300"
            placeholder="Email Address ph"
            value="va@ma.ru"
          />
        </div>

        <div class="float-container">
          <label class="float-label px-2 text-gray-600"
            >What type of event is it?</label
          >
          <select class="float-input w-full px-3 py-2 border border-gray-300">
            <option></option>
            <option>Corporate event</option>
            <option>Wedding</option>
            <option>Birthday</option>
            <option>Other</option>
          </select>
        </div>

        <div class="float-container">
          <label class="float-label px-2 text-gray-600"
            >Additional details</label
          >
          <textarea
            class="float-input w-full border border-gray-300 p-2"
            rows="3"
            placeholder="Additional details"
          ></textarea>
        </div>

        <div class="float-container text-3xl">
          <label for="bigname" class="float-label px-2 text-gray-600"
            >Big Name</label
          >
          <input
            type="text"
            id="bigname"
            class="float-input w-full px-3 py-2 border border-gray-300"
            placeholder="Full Name placeholder"
          />
        </div>
      </form>

      <!-- Shadcn -->
      <form class="space-y-4 flex-1/2">
        <h1 class="text-xl font-bold mb-4 text-gray-800">shadcn</h1>

        <div data-slot="field">
          <label data-slot="field-label" for="Phone" class="px-2 text-gray-600"
            >Phone</label
          >
          <input
            data-slot="input"
            type="text"
            id="Phone"
            class="w-full px-3 py-2 border border-gray-300"
            placeholder="Phone placeholder"
          />
        </div>

        <div data-slot="field" data-float-always>
          <label data-slot="field-label" for="url" class="px-2 text-gray-600"
            >Url (data-float-always)</label
          >
          <input
            data-slot="input"
            type="text"
            id="url"
            class="w-full px-3 py-2 border border-gray-300"
            placeholder="e.g. https://example.com (placeholder)"
          />
        </div>

        <!-- Native select -->
        <div
          class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
          data-slot="native-select-wrapper"
          data-size="default"
        >
          <label data-slot="field-label" for="" class="px-2 text-gray-600"
            >Status (WIP)</label
          >
          <select
            data-slot="native-select"
            data-size="default"
            class="w-full rounded-lg border border-input bg-transparent py-1 pr-8 pl-2 transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
          >
            <option
              data-slot="native-select-option"
              class="bg-[Canvas] text-[CanvasText]"
              value=""
            >
              Select status
            </option>
            <option
              data-slot="native-select-option"
              class="bg-[Canvas] text-[CanvasText]"
              value="todo"
            >
              Todo
            </option>
            <option
              data-slot="native-select-option"
              class="bg-[Canvas] text-[CanvasText]"
              value="in-progress"
            >
              In Progress
            </option>
            <option
              data-slot="native-select-option"
              class="bg-[Canvas] text-[CanvasText]"
              value="done"
            >
              Done
            </option>
            <option
              data-slot="native-select-option"
              class="bg-[Canvas] text-[CanvasText]"
              value="cancelled"
            >
              Cancelled
            </option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>

<script>
  window.onload = () => {
    const focusedElement = document.querySelector('#name');

    focusedElement.focus();
  };
</script>