<div class="container">
  <input required="" type="text" name="text" class="input">
  <label class="label">Username</label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: neumorphism, skeuomorphism, 3d, input */
.container {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  color: white;
}

.container .label {
  font-size: 15px;
  padding-left: 10px;
  position: absolute;
  top: 13px;
  transition: 0.3s;
  pointer-events: none;
}

.input {
  width: 200px;
  height: 45px