JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fields">
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="text" />
</div>
<input type="button" value="Submit" onclick="validateIt();" />

CSS

.input-error {
    border: 1px solid #ff0000;
}

JavaScript

function validateIt() {
    var input_area = document.getElementById("fields");
    var error_input;
    var inputs = input_area.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var cur = inputs[i];
        if (cur.type === "text") {
            if (cur.value === "") {
                if (typeof error_input === "undefined") {
                    error_input = cur;
                }
                cur.className += " input-error";
            }
        }
    }
    
    if (typeof error_input !== "undefined") {
        error_input.focus();
    }
}