JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head><meta charset="utf-8"><title>moriki</title>
<link rel="stylesheet"href="s.css"type"text/css"></head>
<body>
<input type="password" id="pswd" name="pswd"class= "inputSample" />
<input type="text" id="pswd-text" name="pswd-text" style="display:none;" class= "inputSample" />
<input type="checkbox" id="pswd-toggle" name="pswd-toggle" data-for="pswd" />
<label for="pswd-toggle">マスキング解除</label>
</body>
</html>

CSS

@charset"shif_jis";
body { 
  background-color: #EFFBFB;
  margin-top:25pt;
  margin-left:50pt;
  color: #000000;
}
p.example1 { 
color: #1C1C1C;
}

.inputSample {
width:150px;
font-size: 13pt;
padding: 1.5px;
background-color: #ccffff;
border: 1.5px inset #00ccff;
}

JavaScript

$.fn.extend({
    togglePassword : function( config ){
        option = $.extend({
            "postfix" : "-text"
        }, config );
        sync = function(){
            var i = this.type.toUpperCase() === "PASSWORD" ?
                this.id + option.postfix : 
                this.id.replace( option.postfix, "" );
            $( "#" + i ).val( $(this).val() );
        };
        toggle = function(){
            if( this.checked ){
                $.data( this, "pswd" ).hide();
                $.data( this, "text" ).show();
            } else {
                $.data( this, "pswd" ).show();
                $.data( this, "text" ).hide();
            }
        };
        this.each( function(){
            var id, pswd, text, check, handlers;
            id = this.getAttribute( "data-for" );
            pswd = $("#" + id );
            text = $("#" + id + option.postfix );
            check = $(this);
            handlers = { keyup : sync, blur : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            $.data( this, "pswd", pswd );
            $.data( this, "text", text );
            $(this).click( toggle );
            toggle.apply( this );
        });
    }
});

$("#pswd-toggle").togglePassword();