JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <input type="password" placeholder=" ">
  <span>Enter your password</span>
</label>

CSS

label {
  position: relative;
  display: inline-block;
}
  
span {
  padding: 10px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.4s;
  opacity: 0.5;
}

input {
  padding: 10px;
}

/**/
input:focus, input:not(:placeholder-shown) {
  outline: none;
  border-color: blue;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity: 1;
  background-color: white;
  color: blue;
  transform: scale(0.75) translateY(-65%) translateX(-20px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity: 1;
  background-color: white;
  color: blue;
  transform: scale(0.75) translateY(-65%) translateX(-20px);
}