JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">

    <p>First Name</p>
    <input type="text" id="firstname" name="firstname" value="" />

    <p>Last Name</p>
    <input type="text" id="Editbox2" name="lastname" value="" />

    <p>Email</p>
    <input type="text" id="Editbox3" name="email" value="" />
    
    <p>Telephone number</p>
    <input type="text" id="Editbox4" name="telephone" value="" />
    
    <p>What is your question or topic regarding?*</p>
    <select id="topic" name="topic" title="Please select a topic">
        <option></option>
        <option>topic1</option>
        <option>topic2</option>
        <option>topic3</option>
    </select>
    
    
    <p>Please tell us what's on your mind:*</p>
    <textarea name="onyourmind" id="TextArea1" rows="6" cols="29"></textarea>
    
    <input type="submit" id="submit" name="Button1" value="Submit" />
</form>

<div class="et_pb_map" data-center-lat="33.92631582170964" data-center-lng="-118.2283369772461" data-zoom="15" data-mouse-wheel="on" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div aria-hidden="true"...

CSS

.red{
    color: red;
}

JavaScript

window.onload = function () {
    
    
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {

        // validate form on keyup and submit
        $("#commentForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                email: {
                    required: true,
                    email: true
                },
                telephone: "required",
                topic: {
                    required: true
                },
                onyourmind: "required"
            },
            messages: {
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                email: "Please enter a valid email address",
                telephone: "Please enter your phone number",
                topic: "Please choose a topic",
                onyourmind: "<div class='red'>Please tell us whats on your mind</div>"
            }
        });

    });
    
}