<div class="field">
  <input name="email" type="email" inputmode="email" class="text-input" id="email" placeholder="Email">
  <label for="email" class="form-popup__label">Email</label>
</div>

<p style="color: #222;">Вы можете добавить к <code>input</code> класс <code>.valid</code> или <code>.error</code>, чтобы посмотреть как работают стили с валидацией.</p>

body {
  font-family: "Montserrat", "Open Sans", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

.field {
  max-width: 500px;

  position: relative;
  margin-bottom: 40px;

  &:last-child {
    margin-bottom: 0;
  }
}

.text-input {
  width: 100%;
  padding: 26px 16px;
  padding-bottom: 16px;
  font-size: inherit;
  color: inherit;
  border: 2px solid #b3b3b3;
  border-radius: 12px;
  background-color: #252525;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3) inset;

  &::placeholder {
    opacity: 0;
  }
}

.form-popup__label {
  position: absolute;
  top: 1.2em;
  left: 17px;

  color: #a1a1a1;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.text-input:focus ~ .form-popup__label,
.text-input:not(:placeholder-shown) ~ .form-popup__label {
  font-size: 12px;
  transform: translateY(-0.4em);
}

.text-input.valid:focus ~ .form-popup__label,
.text-input.valid:not(:placeholder-shown) ~ .form-popup__label {
  color: #00c2ff;
}
.text-input.error:focus ~ .form-popup__label,
.text-input.error:not(:placeholder-shown) ~ .form-popup__label {
  color: #ff006b;
}

.text-input.valid {
  border-radius: 12px;
  border: 2px solid #00c2ff;
  box-shadow: 0px 0px 24px 0px rgba(0, 194, 255, 0.3),
    0px 0px 24px 0px rgba(0, 194, 255, 0.3) inset;
}

.text-input.error {
  border: 2px solid #ff006b;
  box-shadow: 0px 0px 24px 0px rgba(255, 0, 107, 0.3),
    0px 0px 24px 0px rgba(255, 0, 107, 0.3) inset;
}