JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/fonts/glyphicons-halflings-regular.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/fonts/glyphicons-halflings-regular.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/fonts/glyphicons-halflings-regular.svg"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap-theme.css Copy https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bo"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<div class="row">
<div class="col-md-4">
<form data-toggle="validator" role="form" id="myForm" name="myForm">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Guj" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputFone" class="control-label">Telefone</label>
<input type="text" class="form-control" id="inputFone" placeholder="Telefone" pattern="\([0-9]{2}\)[0-9]{4,6}-[0-9]{3,4}$" required>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
<div...
JavaScript
$('#myForm').validator();
$('#inputFone').mask("(99)9999-9999");