<div class="container d-flex justify-center">
  <form>
    <div class="form-group element">
      <input type="text" id="name" name="name" class="form-control" placeholder=" " pattern="([\w]{2,})+\s+([\w\s]{2,})" required>
      <label for="name" class="form-control-placeholder">
        full name
      </label>
      <span class="error-msg">Please write 2 or more words of at least 2 characters each</span>
    </div>
    <div class="form-group element">
      <input type="password" id="pwd" name="pwd" class="form-control" placeholder=" " pattern="[A-Za-z0-9]{8,}" required>
      <label for="pwd" class="form-control-placeholder">
        password
      </label>
      <span class="error-msg">Please write 8 or more characters.</span>
      <i class="fa fa-eye showpwd" onClick="showPwd('pwd', this)"></i>
    </div>
    <div class="form-group element">
      <input type="email" id="mail" name="pwd" class="form-control" placeholder=" " required>
      <label for="mail" class="form-control-placeholder">
        email
      </label>
      <span class="error-msg">Please type a valid email.</span>
    </div>
    <div class="form-group element">
      <button>Submit</button>
    </div>
  </form>
</div>
</div>

* { font-family: sans-serif; box-sizing: border-box; }
.container { margin-top: 48px; }
.d-flex { display: flex; }
.justify-center { justify-content: center; }
label { cursor: pointer;}
button { background: #f0f0ff; border-radius: .4em; padding: 12px 22px; font-size: 16px; margin-top: 24px; cursor: pointer; 
  &:hover { background: #ffffff; }}

.form-control{
  padding: .9em;
  caret-color: #333;
  &:not(select) {
    padding: 1.75em .75rem 0 5px;
  }
  width: calc(100% - (.75rem + 5px) );
  border-radius: 2px;
  border: 2px solid transparent;
  border-bottom: 2px solid #cfcfcf;
  background: rgb(242, 242, 243);
  font-size: 16px;
}

.form-control:focus {
  outline: none;
}
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
  height: 56px;
}

.form-control-placeholder {
  position: absolute;
  bottom: 1.25em;
  left: 0;
  padding: 7px 0 0 13px;
  transition: all 250ms;
  opacity: .75;
}
span.error-msg {
  color: rgb(224, 32, 32); 
  font-size: 12px; 
  font-weight: 500; 
  transition: all .5s;
  opacity: 0;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid:not(:placeholder-shown) + .form-control-placeholder,
.form-control:not(:placeholder-shown) + .form-control-placeholder,
.form-control:invalid:not(:placeholder-shown) + .form-control-placeholder{
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}
.form-control:invalid:not(:placeholder-shown):not(select):not(:focus), .form-control.invalid:not(:focus) {
  border-bottom: 2px solid #f55;
  caret-color: #f55;
  +label {
    color: rgb(224, 32, 32);
    +.error-msg {
      opacity: 1;
    }
  }
}
.form-control:valid:not(:placeholder-shown):not(select), .form-control.invalid:not(:focus) {
  border-bottom: 2px solid #393;
}
.form-control:invalid:not(:placeholder-shown):not(select), .form-control.invalid {
  border-bottom: 2px solid #fec940;
}


.form-control:invalid:focus {
  border-bottom: 2px solid #cfcfcf;  
}
.showpwd {
  position: absolute;
  right: 25px;
  top: 20px;
  cursor: pointer;
}

function showPwd(id, el) {
  let x = document.getElementById(id);
  if (x.type === "password") {
    x.type = "text";
    el.className = 'fa fa-eye-slash showpwd';
  } else {
    x.type = "password";
    el.className = 'fa fa-eye showpwd';
  }
}