JSFiddle - React, Tailwind, and code Playground

HTML

<form id="login" name="login">
    <input type="text" id="username" class="input-text" placeholder="[email protected]"/><br/>
    <input type="password" id="password" class="input-text" placeholder="password"/>
    <label id="error" class="error"></label>
    <br/>
    <input type="submit" onclick="validateForm();" value="Login" class="submit-button"/>     
</form>

CSS

.error {
    font-size:14px;color:#D31145;float:right;
}

JavaScript

$(document).ready(function () {
    $("#form").validate({
        debug: false,
        rules: {
            username: "required",
            password: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            username: "Please enter your name.",
            password: "Please enter 8 letters minimum.",
        }
    });
    
});