<div class="d-flex justify-center">
  <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" ></i>
    </div>
    <hr>
    <div>
      <label for="passwd">Password</label>
      <div class="relative">
        <input type="password" id="passwd" name="passwd">
        <i class="fa fa-eye showpwd">   </i>
      </div>
    </div>
  </div>
</div>

.d-flex { display: flex; }
.justify-center { justify-content: center; }

.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:hover {
  // background: rgb(229, 229, 230);
}
select.form-control {
  -webkit-appearance: menulist-button;
  height: 55px;
}
.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: 0.5;
}
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:invalid:focus {
  border-bottom: 2px solid #cfcfcf;  
}
.showpwd {
  position: absolute;
  right: 25px;
  top: 20px;
  cursor: pointer;
}

.relative {
  position: relative;
  width: fit-content;
  i {
    position: absolute;
    top: 3px; 
    right: 5px;
  }
}


hr {
  margin: 50px auto;
}

window.onload = function () {
  
  const elements = document.querySelectorAll('[type="password"]');
  elements.forEach(function(elem) {

    elem.parentNode.querySelector('i').addEventListener('click', function(){
      if (elem.type === "password") {
        elem.type = "text";
        this.className = 'fa fa-eye-slash showpwd';
      } else {
        elem.type = "password";
        this.className = 'fa fa-eye showpwd';
      }
    });
  });
  
}