JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" charset="utf-8"></script>


<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" data-toggle="validator">
      <h1 class="text-center"> Contact us </h1>
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com" data-error="Please provide a valid email." required>
        <div class="help-block with-errors"></div>
        <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
      </div>
      <div class="form-group center-block">
        <label for="inputName" class="form-labels">name</label>
        <input type="text" name="name"  pattern="[a-zA-Z]+" data-pattern-error="Characters only." class="form-control form-
        control-lg" placeholder="Norman Geller" required id="input--name">
      <div class="help-block with-errors"></div>
      </div>
      <div class="form-group center-block">
        <label for="inputZipCode" class="form-labels"> Zip code</label>
        <input type="text" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required id="input--zip" data-bv-integer="true" pattern="^[0-9]+$" data-pattern-error="Numbers only">
      <div class="help-block with-errors"></div>
      </div>
      <button type="submit">
      submit
      </button>
    </form>
  </div>
</section>

JavaScript

$('#needs-validation').validator()