JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<form id="basicBootstrapForm">
  <div class="col-sm-4 form-group">
    <div class="error-icon">
      <label class="control-label">Email</label>
      <input class="form-control" id="person_email" name="person_email" placeholder="eg: [email protected]" type="email">
    </div>
  </div>
</form>

JavaScript

$('#basicBootstrapForm').bootstrapValidator({
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        person_email: {
          validators: {
            notEmpty: {
              message: 'The email address is required'
            },
            regexp: {
              regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
              message: 'The value is not a valid email address'
            }
          }
        },
      }
    });