JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<div data-role="page" id="login">
    
    <div data-role="header">
        <h1>Acme Corporation</h1>
    </div>
    
    <div data-role="content">
        
          <form class="validate" method="post" id="formLoc">
            <div data-role="fieldcontain">
                <label for="email-from">from</label>
                <input type="text" name="email-from"  class="required email" id="email-from" placeholder="from" />
            </div>
            <div data-role="fieldcontain">
                <label for="email-to">to</label>
                <input type="text" id="email-to" class="required email" name="email-to" placeholder="to" />
            </div>
            <div data-role="fieldcontain">
                <label for="email-message">message</label>
                <textarea id="email-message" cols="100" rows="40"></textarea>
            </div>
            <div class="email-sent">
                <h4></h4>
            </div>
        
            <div class="SendEmailButton">
                <button type="submit" data-role="button" data-icon="forward" data-inline="true"
                    data-mini="true" data-theme="c">send</button>
            </div>

        </form>
    </div>
    
</div>

CSS

label.error {
    float: none; 
    color: red; 
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 0.5em;
    width: 100%;
    display: block;
    margin-left: 22%;
}

JavaScript

$(document).ready(function() {
    $("#formLoc").validate({
        submitHandler: function(form) {
            alert("Call Login Action");
        }
    });
});