JSFiddle - React, Tailwind, and code Playground

HTML

<form id="genForm"  method="post" action="verify.php">
  <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Subscribe for final</h1>
      </div>


                       <div class="clearfix">
                        <label>Email</label>
                        <div class="input">
                            <input name="Email" type="text" class='required'>
                        </div>
                    </div>
                     <br>

         <br>
         <div class="clearfix">
                        <label>Agreements:</label>
                                    <div class="input"> 
                                     <ul class="inputs-list">
                                     <li>                                      
                                     I accept the terms and conditions.  <input type="checkbox" name="agree" value="1">  //Check box is here, not working
                                          </li>
                                            </ul>
                                            </div> 
                                     </div> 
                                     <br>
           <input class="btn primary" type="submit" value="Submit">

</form>
      
      
      <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

JavaScript

$(document).ready(function() {


    $("#genForm").validate({
        rules: {
            agree: {
                required: true
            }
        }
    })

});