JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" id="txt" />
</form>

CSS

form input[type="text"] {
    padding: 5px;
    outline: none;
} form input[type="text"]:hover {
    border: 1px solid #8A8A8A;
    padding-bottom: 7px;
    padding-left: 7px;
} form input[type="text"]:focus {
    border: 1px solid #040080; /*2F3A99*/
    padding-bottom: 7px;
    padding-left: 7px;
}

JavaScript

(function(a) {
    a.onkeypress = function(e) {
        if (e.keyCode >= 49 && e.keyCode <= 57) {}
        else {
            if (e.keyCode >= 97 && e.keyCode <= 122) {
                alert('Error');
                // return false;
            } else return false;
        }
    };
})($('txt'));

function $(id) {
    return document.getElementById(id);
}