JSFiddle - React, Tailwind, and code Playground

by Rhys O'Connor

HTML

<form>


<div class="form-field-label">Full Name :</div>
<div class="form-field-input"><input type="text" value="" name="fname" id="fname" required></div>
<div class="form-field-label">Address :</div>
<div class="form-field-input"><textarea value="" name="address" id="address" rows="4" pattern=".{15,}"   required title="15 characters minimum" required></textarea></div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input"><input type="text" value="" name="email" id="email" required></div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input"><input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required></div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input"><input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required></div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input"><input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)"></div>

<div class="form-field-label">Birthdate :</div>
<div class="form-field-input"><input type="text" name="birthdate" id="birthdate"   placeholder="Click To Open Calendar" required></div>


<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input"><input type="text" value="" name="age" id="age"  placeholder="Select Birthdate" required></div><br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox"> <input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General"/> General </label> <br>
<label class="checkbox"> <input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management"/> Stressfull Life Like - IT/BPO/Management </label> <br>
<label class="checkbox"> <input id="select_question_category-2" type="checkbox"...

CSS

.link-button-blue {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #002633;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px;
  cursor:pointer;
}

.link-button-blue:disabled {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #333;
  color: #ccc;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px;
  cursor:no-drop;
}

JavaScript

$()