<div class="relative">
  <input class="input-cal input-base" id="input" placeholder="" type="text">
  <label id="label-input">Name</label>
</div>
<style>
/* From Uiverse.io by Amine-maker - Tags: active, input, account */
#label-input {
  transition: all 0.1s ease-in-out;
  color: #2c2c54;
  position: absolute;
  top: 30%;
  left: 18px;
  transform: scale(0.95);
  opacity: 1;
  pointer-events: none;
}

.input-base {
  border-radius: 10px;
}

#input:focus ~ label#label-input,
#input:not(:placeholder-shown) ~