JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="setFocus()">
<div id="calc" align="center">
	<table>
		<tr><td colspan="3"><input id="input" value="" maxlength=4 onKeyPress="return check_number(event);"></input></td></tr>
		<tr>
		<td><button type="submit" onclick="document.getElementById('input').value+='1'; return false;" value = "1"><span>1</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='2'; return false;" value = "2"><span>2</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='3'; return false;" value = "3"><span>3</span></button></td>
		</tr>
		<tr>
		<td><button type="submit" onclick="document.getElementById('input').value+='4'; return false;" value = "4"><span>4</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='5'; return false;" value = "5"><span>5</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='6'; return false;" value = "6"><span>6</span></button></td>
		</tr>
		<tr>
		<td><button type="submit" onclick="document.getElementById('input').value+='7'; return false;" value = "7"><span>7</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='8'; return false;" value = "8"><span>8</span></button></td>
		<td><button type="submit" onclick="document.getElementById('input').value+='9'; return false;" value = "9"><span>9</span></button></td>
		</tr>
		<tr><td colspan="3"><button style="position:relative;width:90%;height:50px;" type="submit" onclick="document.getElementById('input').value+='0';return false;" value = "0"><span>0</span></button></td><td></td></tr>
	</table>
</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;}

JavaScript

$(document).ready(function(){   
    $("#input").keyup( function() {
        var $this = $(this);
        if($this.val().length > 4)
            $this.val($this.val().substr(0, 4));           
    });
     });
 function setFocus(){
      document.getElementById("input").focus();
      }
function check_number(obj) {
  obj = (obj) ? obj : window.obj
  var charCode = (obj.which) ? obj.which : obj.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    status = "В данное поле можно вводить только цифры"
    return false;
  }
  status = \'\';
  return true;
}