JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-12 col-sm-12 col-md-12 cnt">
      <span id="error_message" class="error_msge">
        </span>
    </div>
  </div>
</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
  <div class="container-fluid cloned-row1 cloned_div educat_info" id="education-row1">
    <!-- first row-->
    <div class="row">
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
        <span class="required-star">*</span>
        <label>School Name </label>
        <br/>
        <div class="input-group">
          <input type="text" id="txt_schName" name="txt_schName" class="ipt_Field required_Field txt_schName " />
          <p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 checking_sol">
        <label>School Description</label>
        <br>
        <input type="text" maxlength="30" class="ipt_Field school_Name" name="school_Name" id="school_Name" disabled/>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 hsc_fid">
        <label><span class="required-star">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" maxlength="10" class="ipt_Field ipt_Havg required_Field" id="ipt_Havg" name="ipt_Havg" />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3"></div>
    </div>
    <!-- Second row-fluid-->
    <div class="row">
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 deg_fid">
        <label><span class="required-star">*</span>Degree</label>
        <br/>
     ...

CSS

.header {
  height: 30px;
  background-color: #049F51;
  color: #fff;
  padding-left: 5px;
  padding-bottom: 5px;
  font-size: 15px;
  letter-spacing: 1px
}
.error_message {
  background-color: #f08080;
  color: #fff;
  border: 1px solid red;
  text-align: center
}
.errRed {
  color: #000!important;
  border: 0!important;
  padding: 6px!important;
  outline: 1px solid #EA373D!important
}

JavaScript

$(document).ready(function() {
  var $errorMessageDiv = $("#error_message"),
    $errorMessageDiv.hide();
});