JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<div class="control-group">
    <input id="txtInput" type="password" placeholder="Passowrd" onchange="CheckModification();" onpaste="this.onchange();" oninput="this.onchange();"/>
</div>

CSS

input[type="password"] {
    font-size:54px;
    height:24px;
    width:300px;
}

JavaScript

$('#txtInput').focus(function () {
        if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '48px');
         }
         else {
             $('#txtInput').css('font-size', '48px');
         }
     });

     $('#txtInput').blur(function () {
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '48px');
         }
         else {
             $('#txtInput').css('font-size', '48px');
         }
     });

function CheckModification(){
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '48px');
         }
         else {
             $('#txtInput').css('font-size', '48px');
         }
     }