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 inputs = input_area.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var cur = inputs[i];
        if (cur.type === "text") {
            if (cur.value === "") {
                cur.className += " input-error";
            }
        }
    }
    
    var errors = input_area.querySelectorAll(".input-error");
    if (errors.length > 0) {
        errors[0].focus();
    }
}