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 />

CSS

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

JavaScript

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