Gwecode.
Forms & inputs

Floating Label Input

A text input whose placeholder label floats above the field once it is focused or filled with text.

live preview 
<div class="floatinput-wrap">
  <input class="floatinput-input" type="text" placeholder=" " id="floatinput-email">
  <label class="floatinput-label" for="floatinput-email">Email address</label>
</div>
.floatinput-wrap {
  box-sizing: border-box;
  position: relative;
  width: 260px;
  font-family: system-ui, -apple-system, sans-serif;
}
.floatinput-input {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 14px 8px;
  font-size: 15px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background-color: #ffffff;
  color: #111827;
  transition: border-color 0.2s ease;
}
.floatinput-input:focus {
  border-color: #3b82f6;
}
.floatinput-label {
  position: absolute;
  left: 14px;
  top: 15px;
  font-size: 15px;
  color: #9ca3af;
  pointer-events: none;
  transition: transform 0.15s ease, font-size 0.15s ease, color 0.15s ease, top 0.15s ease;
}
.floatinput-input:focus + .floatinput-label,
.floatinput-input:not(:placeholder-shown) + .floatinput-label {
  top: 6px;
  font-size: 11px;
  color: #3b82f6;
}