Form by jack0237

1.form-container {
2  background: linear-gradient(#212121, #212121) padding-box,
3    linear-gradient(120deg, transparent 25%, #1cb0ff, #40ff99) border-box;
4  border: 2px solid transparent;
5  padding: 32px 24px;
6  font-size: 14px;
7  color: white;
8  display: flex;
9  flex-direction: column;
10  gap: 20px;
11  box-sizing: border-box;
12  border-radius: 16px;
13}
14
15.form {
16  display: flex;
17  flex-direction: column;
18  align-items: center;
19  gap: 20px;
20}
21
22.heading {
23  font-size: 20px;
24  font-weight: 600;
25}
26
27.form-input {
28  color: white;
29  background: transparent;
30  border: 1px solid #414141;
31  border-radius: 5px;
32  padding: 8px;
33  outline: none;
34}
35
36button {
37  border-radius: 5px;
38  padding: 6px;
39  background: #ffffff14;
40  color: #c7c5c5;
41  border: 1px solid #414141;
42}
43
44button:hover {
45  background: #212121;
46  cursor: pointer;
47}
48
49.form-group {
50  display: flex;
51  flex-direction: column;
52  gap: 5px;
53  color: #414141;
54  position: relative;
55}
56
57.form-group label {
58  position: absolute;
59  top: 0;
60  left: 0;
61  padding: 5px;
62  pointer-events: none;
63  transition: 0.5s;
64}
65
66.form-group input:focus ~ label,
67.form-group input:valid ~ label {
68  top: -16px;
69  left: 0;
70  background: #212121 padding-box;
71  padding: 10px 0 0 0;
72  color: #bdb8b8;
73
74  font-size: 12px;
75}
76