JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<center>Hello Every One!</center>
   
    <center>
        <input class="inpt" placeholder="name" type="text" /><br />
<input class="inpt" placeholder="email" type="text" /><br />
<input class="inpt" placeholder="password" type="password" /><br />
 </center>
        <center>
Just Try Focusing and Bluring the Inputs
        </center>
    </body>

CSS

.inpt{
    width:300px;
    height:50px;
    background:#eee;
    color:#444;
    border:2px solid #ddd;
    padding:5px;
    transition: all ease 1s;
    border-radius:5px;
    outline:none;
}
.inpt:focus{
    background:#fff;
    color:#222;
    border:2px solid #000;
}
.err{
    background:pink;
    border:2px solid #f00;
    color:#a00;
}
.errdiv{
position:absolute;
top:0px;
left:0px;
height:30px;
display:inline-block;
padding:5px;
border-radius:5px;
background:#a00;
border:1px solid #a44;
color:#fff;
text-align:center;    
    font-weight:bolder;
    visibility:visible;
    opacity:0;
}
body{
    /*mozilla hack*/
    -moz-transform: scale(1.25,1.25);
    /* Chrome and Safari */
   -webkit-transform: scale(1.25,1.25);
    /*IE */
    -ms-transform:scale(1.25,1.25);
    /*Opera*/
    -o-transform:scale(1.25,1.25);
    /*Others*/
    transform:scale(1.25,1.25);
     
}

JavaScript

$(document).ready(function(){
$(".inpt").blur(function(){
     $(".errdiv").remove();
var vl=$(this).val();
    var vl1=vl.split(" ").join("");
    if(vl==""||vl1==""){
    $(this).addClass("err");
    }
    
});
$(".inpt").focus(function(){
    $(".errdiv").remove();
    if($(this).hasClass("err")){
    $(this).removeClass("err");
        
        var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/;
        var matches =$("body").css('transform').match(matrixRegex);
        //alert(matches[1]);
         $("body").css('transform', 'scale(' + '1' + ')');
        
        var tp=$(this).offset().top+($(this)[0].getBoundingClientRect().height/3.00 - 25); // This isn't working.
        var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width - 5; // Now Left Positioning becomes easy in zoomed body.
       // alert(tp+" "+lf);
         
        $("body").append("<div class='errdiv' style='position:absolute;top:"+tp+"px;left:"+lf+"px;'>*This is Required.</div>");
        $(".errdiv").animate({
            "visibility":"visible",
            "opacity":"1"
        },1000);
        $("body").css('transform', 'scale(' + matches[1] + ')');
    }
});

});