JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aa"></div>
<div id="calc" align="center">
	<table>
		<tr><td colspan="3"><input id="input" value="" maxlength=4></input></td></tr>
		<tr>
		<td><button type="submit" value = "1"><span>1</span></button></td>
		<td><button type="submit" value = "2"><span>2</span></button></td>
		<td><button value = "3"><span>3</span></button></td>
		</tr>
		<tr>
		<td><button type="submit" value = "4"><span>4</span></button></td>
		<td><button type="submit" value = "5"><span>5</span></button></td>
		<td><button type="submit" value = "6"><span>6</span></button></td>
		</tr>
		<tr>
		<td><button type="submit" value = "7"><span>7</span></button></td>
		<td><button type="submit" value = "8"><span>8</span></button></td>
		<td><button type="submit" value = "9"><span>9</span></button></td>
		</tr>
		<tr><td colspan="3"><button style="position:relative;width:90%;height:50px;" type="submit" value = "0"><span>0</span></button></td><td></td></tr>
	</table>
</div>
<div id="hd"></div>

CSS

body, html {height:100%;width:100%;padding:0;margin:0;-webkit-user-select: none;-moz-user-select: -moz-none;font-weight:900;}
td {padding:2px;text-align:center;outline:none;border-radius:25px;}
button {width:70px;height:70px;outline:none;padding:0px;border-radius:25px;}
button:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}
input {position:relative;background-color:#eee;width:100%;height:40px;border:1px groove gray;
	outline:none;text-align:center;border-radius:25px;font-size:25px;}
#calc {position:relative;width:280px;padding:10px 20px 30px;border:2px double black;left:100px;top:100px;border-radius:15px;}
#calc:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);}
p {font-weight:bold;}
span {font-weight:bolder;font-size:25px;}

#hd {position:relative;display:none;
height:100px;width:100px;background-color:#f46;}

JavaScript

$(document).ready(function(){   
    $("#input").keyup( function() {
        var $this = $(this);
        if($this.val().length > 4)
            $this.val($this.val().substr(0, 4));           
    });
  $("button").on('click', function(){
    
     var vall = $(this).attr('value');
   // console.log(val);
    var input = $('#input');
        if(input.val().length < 4){
           $('#input').val($('#input').val()+vall);  
        }  
   }) 
 });


var nameStat;
$(function() {
    $("#input").change(function(){
    name = $("#input").val();

        if(name.length < 4){
            nameStat = 0;
                        button();
        }else{
            nameStat = 1;
                        button();
        }
    });
    });
function button(){
    if(nameStat == 1){
        $("#hd").show(800);
    }else{
        $("#hd").hide("slow");
    }
}