JSFiddle - React, Tailwind, and code Playground

HTML

<input id="Phone" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" type="number" max = "9999999999" placeholder="Phone Number" />

<script>
  function maxLengthCheck(object) {
    if (object.value.length > 4)
      object.value = object.value.slice(0, 4)
  }
    
  function isNumeric (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]|{3}\./;
    if ( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
    }
  }
</script>

CSS

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    letter-spacing: 20px;

}