JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<div id="container">
        <form id="contactForm" method="" action="">
            <p>
                <label for="name">Name </label>
                <input id="name" name="name1" />
            </p>
            <p>
                <label for="email">E-Mail </label>
                <input id="email" name="email" />
            </p>    
            <p>    
                <label for="message">Your Message </label>
                <textarea id="message" name="message" rows="4" cols="30" ></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="submit"/>
            </p>
        </form>

CSS

.error {
    color: red;
    font: 12pt verdana;
    padding-left: 10px
}

JavaScript

$(function() {
        
        // validate contact form on keyup and submit
        $("#contactForm").validate({
            //set the rules for the fild names
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                    minlength: 2
                },
            },
            //set messages to appear inline
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email address",
                message: "Please enter your message"
            }
        });
    });