<div class="content">
  <div class="lock">
    <div class="fa fa-lock"></div>
  </div>
  <input type="password" placeholder="Enter Password" required>
  <span class="show-hide">
    <i class="fa fa-eye"></i>
  </span>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content {
  height: 50px;
  width: 280px;
  display: flex;
  position: relative;
}
.content .lock {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #48dbfb;
  color: #fff;
  line-height: 48px;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #48dbfb;
}
.content input {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #48dbfb;
  padding-left: 60px;
  font-size: 16px;
  outline: none;
  color: #37d7fb;
  font-family: "Poppins", sans-serif;
}
input:focus {
  box-shadow: 0 0 15px #82e6fc, 0 0 25px #b4f0fd, 0 0 35px #ffffff;
}
input::placeholder {
  color: #a6a6a6;
}
.show-hide {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.show-hide i {
  font-size: 19px;
  color: #48dbfb;
  cursor: pointer;
  display: none;
}
.show-hide i.hide::before {
  content: "\f070";
}
input:valid ~ .show-hide i {
  display: block;
}
  const pass_field = document.querySelector("input");
  const show_btn = document.querySelector("i");
  show_btn.addEventListener("click", function() {
    if (pass_field.type === "password") {
      pass_field.type = "text";
      show_btn.classList.add("hide");
    } else {
      pass_field.type = "password";
      show_btn.classList.remove("hide");
    }
  });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.