JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myform" name="form"  action="http://www.google.com">
<div class="line">
    <label>Your Username</label>
    <input class="req" type="text"/>
</div>
<div class="line"><label>Your Password</label><input class="req" type="password" /></div>
                    <div class="line"><label>Your Website</label><input class="req" type="text" /></div>
                    <div class="line"><label>Your Message</label><textarea  class="req"></textarea></div>
                    <div class="line"><input type="submit" id="sub"></submit>                    
</form>

CSS

.line{padding-top:10px;}
        .inline input{padding-left: 20px;}
        label{float:left;width:120px;}

JavaScript

$(function() {
        function validateform() {
                var valid = true;
                $(".req").css("border","1px solid green");
                $(".req").each(function() {
                    if($(this).val() == "" ||  $(this).val().replace(/\s/g, '').length == 0) {
                        $(this).css("border","1px solid red");
                        valid = false;
                    }
                });
                return valid;
                }
                $("#sub").click(function() {
                $('#myform').submit(validateform);
                    $('#myform').submit();
                });
            
        });