JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="/contact" method="post">
                <div class="col-dual">
                    <div class="form-row firstName">
                        <label for="firstName" class="label-control required-label">First Name:</label>
                        <p class="form-alert">Enter a valid first name.</p>
                        <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required">
                    </div>
                    <div class="form-row lastName">
                        <label for="lastName" class="label-control">Last Name:</label>
                        <p class="form-alert">Enter a valid last name. Example: Smith</p>
                        <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control">
                    </div>
                    <div class="form-row phone">
                        <label for="phone" class="label-control">Phone:</label>
                        <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p>
                        <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control">
                    </div>
                    <div class="form-row email ">
                        <label for="email" class="label-control required-label">Email:</label>
                        <p class="form-alert">Enter a valid email. Example: [email protected]</p>
                        <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required">
                    </div>
                </div>
                <div class="col-dual">
                    <div class="form-row">
                        <label for="subject" class="label-control required-label">Subject:</label>
                        <input type="text" name="subject" id="subject"...

CSS

.form {
    float:left;
    width:100%;
}
.form-row {
    float:left;
    width:100%;
    margin:0 0 20px 0;
}
.label-control {
    float:left;
}
.required-label:after {
    float:right;
    margin:3px 0 0 3px;
    content:'\f069';
    color:rgba(245, 0, 0, 1);
    font-family:'FontAwesome';
    font-size:8px;
}
.form-control {
    float:left;
    width:100%;
    max-width:100%;
    padding:9px 9px;
    background-color:rgba(245, 245, 245, 1);
    border:none;
    border-radius:0px;
    box-shadow:inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
    color:rgba(68, 68, 68,1);
    font-family:'Open Sans';
    font-size:14px;
    font-weight:500;
    letter-spacing:1px;
    -webkit-appearance:none;
    -webkit-transition:all .2s ease-in-out;
        -ms-transition:all .2s ease-in-out;
            transition:all .2s ease-in-out;
}
.form-control:hover, .form-control:focus, .form-control:active {
    box-shadow:inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
}
textarea {
    min-height:175px;
}
input[type=submit] {
    box-shadow:none;
    cursor:pointer;
    letter-spacing:1px;
}
input[type=submit]:disabled {
    opacity:0.5;
    cursor:not-allowed;
}
.form-alert {
    float:left;
    display:none;
    width:100%;
    color:rgba(210, 32, 32, 1);
}

JavaScript

$(document).ready(function() 
{ 
    (function() 
    {
        $('.required').on('keyup change', function() 
        {
        		var requiredFieldsCompleted = true;
            $('.required').each(function() 
            {
                if (this.value == '')
                {
                	requiredFieldsCompleted = false;
                }
            });
            
            if (requiredFieldsCompleted)
            {
            	$('#submit').removeAttr('disabled');
            	
            }
            else
            {
            	$('#submit').attr('disabled', 'disabled');
            }

        });
    })()

    $('#firstName').on('change', function() 
    {
        var firstName = this.value;
        if (/^[a-zA-Z- ]*$/.test(firstName) == false) 
        {
            $("#firstName").css('border', '1px solid #d22020').val('');
            $('.firstName .form-alert').css('display', 'block');
        }
        else 
        {
            $("#firstName").css('border', 'none');
            $('.firstName .form-alert').css('display', 'none');
        }
    });

    $('#lastName').on('change', function() 
    {
        var lastName = this.value;
        if (/^[a-zA-Z- ]*$/.test(lastName) == false) 
        {
            $("#lastName").css('border', '1px solid #d22020').val('');
            $('.lastName .form-alert').css('display', 'block');
        }
        else 
        {
            $("#lastName").css('border', 'none');
            $('.lastName .form-alert').css('display', 'none');
        }
    });

    $('#phone').on('change', function() 
    {
        var phone = this.value;
        if (this.value !== '') {
            if (!$.isNumeric(phone))
            {
                $("#phone").css('border', '1px solid #d22020').val('');
                $('.phone .form-alert').css('display', 'block');
            }
            else 
            {
                $("#phone").css('border', 'none');
                $('.phone .form-alert').css('display',...