JSFiddle - React, Tailwind, and code Playground

HTML

<input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required />
<input class="ui_input" id="input_pwd_fake" name="pass_fake" style="height:25px; width:250px; font-size:14px;" />

CSS

input.watermark {
	color: #D3D3D3; font-weight: 400;
}

JavaScript

$(document).ready(function() {
 
	var watermark = 'Password';
 
	//init, set watermark text and class
    $('#input_pwd').hide();
	$('#input_pwd_fake').val(watermark).addClass('watermark');
 
	//if blur and no value inside, set watermark text and class again.
 	$('#input_pwd').blur(function(){
        
        if ($(this).val() == ''){
            $(this).hide();
            $('#input_pwd_fake').show().val(watermark).addClass('watermark');
		}
 	});
 
	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#input_pwd_fake').focus(function(){
  		$(this).hide();
        $('#input_pwd').show().focus();
 	});
});