JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head lang="en">
    <title></title>
    <style>
        #txtFeedback {
            color: #900
        }
        .error {
            display:inline;
            color: #900;
        }
    </style>
</head>
<body>
    <form action="http://www.google.com" id="myForm">
        <div id="txtFeedback"></div>
        <div>
            <label for="firstName">First Name:</label>
            <input id="firstName" />
            <div class="error"></div>
        </div>
        <div>
            <label for="lastName">Last Name:</label>
            <input id="lastName" />
            <div class="error"></div>
        </div>
        <div>
            <label for="address">Address:</label>
            <input id="address" />
            <div class="error"></div>
        </div>
        <div>
            <label for="city">City:</label>
            <input id="city" />
            <div class="error"></div>
        </div>
        <div>
            <label for="state">State:</label>
            <input id="state" />
            <div class="error"></div>
        </div>
        <div>
            <label for="zip">Zip:</label>
            <input id="zip" />
            <div class="error"></div>
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input id="phone" />
            <div class="error"></div>
        </div>
        <div>
            <label for="email">Email:</label>
            <input id="email" />
            <div class="error"></div>
        </div>
        <div>
            <input type="submit" value="submit" id="btnSubmit">
        </div>
    </form>
    <script src="js/main.js"></script>
</body>

</html>

JavaScript

var formReference = document.querySelector("#myForm");
var txtFirstName = document.querySelector("#firstName");
var txtLastName = document.querySelector("#lastName");
var txtAddress = document.querySelector("#address");
var txtCity = document.querySelector("#city");
var txtState = document.querySelector("#state");
var txtZip = document.querySelector("#zip");
var txtPhone = document.querySelector("#phone");
var txtEmail = document.querySelector("#email");
var txtFeedback = document.querySelector("#txtFeedback");
var errorDivs = document.getElementsByClassName("error");


//listen for form submission
formReference.addEventListener('submit', onFormSubmit);

function onFormSubmit(event) {
    var isValid = true;
    txtFeedback.innerHTML = "";

    for (var i = 0; i < errorDivs.length; i++) {
        errorDivs[i].innerHTML = "";
    }

    //checking for validity
    if (txtFirstName.value == "" || !isNaN(txtFirstName.value)) {
        console.log("invalid");
        isValid = false;
        txtFeedback.innerHTML += "<p>Please enter a valid first name.</p>";
        txtFirstName.nextElementSibling.innerHTML = "Please enter a valid first name"
    }

    if (txtLastName.value == "" || !isNaN(txtLastName.value)) {
        console.log("invalid");
        isValid = false;
        txtFeedback.innerHTML += "<p>Please enter a valid last name.</p>";
        txtLastName.nextElementSibling.innerHTML = "Please enter a valid last name"
    }

    if (txtAddress.value == "" || !isNaN(txtAddress.value)) {
        console.log("invalid");
        isValid = false;
        txtFeedback.innerHTML += "<p>Please enter a valid Address.</p>";
        txtAddress.nextElementSibling.innerHTML = "Please enter a valid address."
    }

    if (txtCity.value == "" || !isNaN(txtCity.value)) {
        console.log("invalid");
        isValid = false;
        txtFeedback.innerHTML += "<p>Please enter a valid city.</p>";
        txtCity.nextElementSibling.innerHTML = "Please enter a valid city."
   ...