JSFiddle - React, Tailwind, and code Playground

HTML

<label>Enter username</label>
<div>
  <input class="inputField nameInput"></input>
</div>
<label>Enter password</label>
<div class="pwField inputField">
  <div class="pwData"></div>
  <div class="cursor"><div class="tfarea"></div></div>
    
</div>

<button id="clickme">Login</button>

<div class="info"></div>

CSS

.active .blink {
    border-left : 1px solid gray;
    height : 20px;
    width : 1px;
}
.inputField { 
     width : 200px; height:20px; 
     border:1px solid #e7e7e7;
     padding: 5px;
     overflow : hidden;
    }
.active {
    box-shadow:inset 0 0 1px 1px #47f;
}
.pwData { float:left;}
.cursor { float:left;}
.tfarea { position:relative;width:1px;height:0px;overflow:hidden;}

JavaScript

var pw = "", bHasFocus = false, tfArea;
setInterval( function() {
   $(".cursor").toggleClass("blink");
},600);

$(".pwField").on("click", function() {
    $(".pwField").addClass("active");
    if(tfArea) {     
        tfArea.focus(); 
        bHasFocus = true;
        return;
    }
    tfArea = document.createElement("textarea");
    tfArea.value="";
    $(".tfarea").append(tfArea);
    tfArea.focus();   
    bHasFocus = true;
    $(tfArea).on("blur", function() {
        $(".pwField").removeClass("active");
        console.log("blur");
        bHasFocus = false;
    });
});

$(".nameInput").on("blur", function() {
    $(".pwField").trigger("click");
});

var asterisks = function(n) {
    var str ="";
    while(n--) str+="*";
    return str;
};

$(document).keydown(function(  ) {
    if(!bHasFocus) return;
    pw = tfArea.value;
    $(".pwData").html( asterisks( pw.length ) );
});

$(document).keyup(function(  ) {
    if(!bHasFocus) return;
    pw = tfArea.value;
    $(".pwData").html( asterisks( pw.length ) );
});

$("#clickme").on("click", function() {
    $(".info").append("<div> Username "+$(".nameInput").val()+" pw= "+pw+"</div>");
    pw = "";
    tfArea.value = "";
    $(".pwData").empty();   
});