JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 128px;">
    <span id="fakepasscodeSpan" style="display: none; ">
        <input id="fakepasscode" type="password" autocomplete="off">
    </span>
    <span id="passcodeSpan" style="display: inline; ">
        <input id="passcode" hint="password" type="text" autocomplete="off">
    </span>
</div>

CSS

input[type="text"],
input[type="password"]{
    width: 110px;
    height: 20px; 
    padding-top: 0px;
    padding-right: 8px; 
    padding-bottom: 0px;
    padding-left: 8px; 
}

JavaScript

var clearField = function() {
    if ($("#passcode").val() != "password") {
        $("#passcode").val("");
    }
}

var resetField = function() {
    if ($("#passcode").val().length == 0)
    $("#passcode").val("password");
}


var pwdFocus = function() {
    $("#passcodeSpan").hide();
    $("#fakepasscode").val("");
    $("#fakepasscodeSpan").show();
    $("#fakepasscode").focus();
}

var pwdBlur = function() {
    if ($("#fakepasscode").val() == "") {
        $("#fakepasscodeSpan").hide();
        $("#passcodeSpan").show();
    }
}

var setupHintField = function() {
    $("#passcode").unbind("focus blur change");
    $("#passcode").focus(function() {
        clearField();
    });
    $("#passcode").blur(function() {
        resetField();
    });
    $("#passcode").change(function() {
        resetField();
    });
    $("#passcodeSpan").show();
    $("#fakepasscodeSpan").hide();
}


$(document).ready(function() {
    $("#passcode").val($("#passcode").attr("hint"));
    setupHintField();
    $("#passcode").unbind("focus");
    $("#passcode").focus(function() {
        pwdFocus();
    });
    $("#fakepasscode").blur(function() {
        pwdBlur();
    });
});