JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<div class="content contact" style="padding-left: 50px;">
    
    
    
    <form class="form" id="feedback-form" method="post" action="#">
     
        
        <label for="phone">Contact number:</label>
        <input type="text" value="" id="phone" name="phone" class="required"> 
        <br class="clr">
        
        <div class="form-buttons">
            <input id="submit" type="submit" value="Submit" class="button" >
        </div>
        <br class="clr">
        <br /><br />
        
    </form>
    
    
</div>

CSS

/* CONTACT */

.contact {  }
.contact p { margin: 10px 0}
.form { text-align: left; margin: 30px 0 0; border-bottom: 1px solid #444; }
.form label { width: 200px; float: left; line-height: 22px; }
.form select, .form input,  .form textarea { float: left; background-color: #EDF5DD; border: 1px solid #C1CF5F; width: 300px; padding: 3px; margin: 1px 0; }
.form .width150 { width: 150px; }
.form .width240 { width: 240px }
.form .width40 { width: 40px }
.form .width80 { width: 80px }
.form .error { color: #C3271F; display: block; font-size: 10px;}
.form .button { float: left; clear: both; margin-left: 200px; background: #6E783B; color: #EDF5DD; cursor: pointer; width: 100px; } 


/*!Feedback
------------------------------------*/
#feedback-iframe { height:150px; padding: 10px 10px 25px 45px; !important; margin-top: 30px;}
.feedback-form .content { padding: 120px 0px 0px 0px; background: url(../BiffaWestSussex.png) no-repeat 44px 10px; } 

.form select { width: 160px !important; padding: 3px !important; line-height: 22px !important; outline: none !important;}
.form select option { line-height: 16px !important; outline: none !important;}
.form #submit[disabled='disabled'] { opacity: 0.2; filter: alpha(opacity = 20); cursor: default;}
.form label.error { display: block; clear: both; margin-left: 200px !important;}
.form input.error, .form textarea.error { border: 1px solid #C03 !important;}
#thank-you { display: none;}
#get-name { font-weight: bold;}

#ui-datepicker-div { display: none; font-size: 12px !important; border-radius: 0px !important; }
.ui-corner-all { border-radius: 0px !important; }
.ui-state-default, .ui-widget-content .ui-state-default { color: #000 !important; background: none !important; background-color: #EDF5DD !important; border: 1px solid #C1CF5F !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-state-active, .ui-widget-content .ui-state-active { color: #F00 !important;}
.ui-timepicker-div .ui-widget-header{ margin-bottom:...

JavaScript

$(document).ready(function() {


/*! Form Validation
    ---------------------------------------------*/
    $("#feedback-form").validate({
        rules: {
            
            phone: {
                number: true,
                minlength:13,
                maxlength: 16
            }
            
        }
       
    });

    
});