JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

	<div class="vcenter container">

<div class=" row text-center h-100">
    <div class="mobilestretch table h-100 d-table">
        <div class="mobilestretch d-table-cell table-cell align-middle">
		
<div class="container">
         <div class="row" style="transition: all 0.25s;">
            <div class="col-sm-12 align-items-center align-self-center" style="transition: all 0.25s; flex-wrap:wrap;">
			

			
              <h1 class="headline semibolder text-white mt-2 mt-md-0 text-shadower">Voozlr connects you to local creators online</h1>
		
		<a name="PostForm"></a>	  
		<form class="p-sm-3 p-2 signupForm1 bg-black input-group mb-sm-3 rounded" method="post" action="./signup/chooseaccount.html">
 <p class="bigsentence text-white text-shadow text-center semibolder" style="line-height:1.6;">Join thousands <span class="d-none d-md-inline-block">of local people and creators </span> already on Voozlr    
			<span style="width:2px;" class=""></span> </p>


  <div class="w-100">
	<span class="error"></span>
	<div class="pm0 form-row w-100">

	<div class="input-group pm0 col-sm col-8 mx-auto">
      <input type="text" name="autocomplete" id="autocomplete" class="lightfield form-control mx-auto sentence rounded" placeholder="City"/>
    </div>
    <div class="input-group py-0 my-0 mr-0 pr-0 col-sm col-4 mx-auto">
      <select name="state" id="inputState" class="state d-inline-block d-sm-none lightfield form-control mx-auto sentence rounded">
        <option value="" selected>...</option>
	<option value="AL">AL</option>
	<option value="AK">AK</option>
	<option value="AZ">AZ</option>
	<option value="AR">AR</option>
	<option value="CA">CA</option>
	<option...

JavaScript

$(".signupForm1").validate({
    rules: {
        'autocomplete': {
            required: true,
            maxlength: 200
        },
		'state': {
            required: true,
            maxlength: 200
        }
    },
   messages: {
        'autocomplete': {
            required: "Enter your First Name.",
            maxlength: "Your First Name cannot exceed 200 characters"
        },
		'state': {
            required: "Enter your Last Name.",
            maxlength: "Your Last Name cannot exceed 200 characters"
        }
    }
});