JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="text1" />

CSS

input.input-error {
    color: #ff0000;
    border: 1px solid #ff0000;
    box-shadow: 0 0 5px #ff0000;
}

JavaScript

window.onload = function () {
    var textbox = document.getElementById("text1");
    var maxVal = 10;
    
    addEvent(textbox, "keyup", function () {
        var thisVal = +this.value;
        
        this.className = this.className.replace(" input-error ", "");
        if (isNaN(thisVal) || thisVal > maxVal) {
            this.className += " input-error ";
            // Invalid input
        }
    });
};

function addEvent(element, event, callback) {
    if (element.addEventListener) {
        element.addEventListener(event, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + event, callback);
    } else {
        element["on" + event] = callback;
    }
}