JSFiddle - React, Tailwind, and code Playground

by javiros

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="clearfix">
    <br/>
</div>
<form class="form" name="userCreate">
    <div class="col-lg-3">
        <div class="form-group">
            <label><span class="glyphicon glyphicon-user"></span> User Name</label>
            <input type="text" class="form-control" ng-model="username" name="username" placeholder="Enter name" required autofocus="true">
        </div>
    </div>
    <div class="col-lg-3">
        <div class="form-group" ng-class="{ 'has-error' : userCreate.email.$invalid && !	userCreate.email.$pristine }">
            <label><span class="glyphicon glyphicon-envelope"></span> Email</label>
            <input type="email" name="email" class="form-control" ng-model="email" ng- pattern="/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-	z]{2})?)$/i">
            <p ng-show="userCreate.email.$invalid && !userCreate.email.$pristine" class="help-	block">* Enter a valid email.</p>
            <!-- Email validation message -->
        </div>
    </div>
    <div class="col-lg-3">
        <div class="form-group" ng-class="{ 'has-error' : userCreate.phone_number.$invalid && 	!userCreate.phone_number.$pristine }">
            <label><span class="glyphicon glyphicon-earphone"></span> Phone Number</label>
            <input type="text" class="form-control" ng-model="phone_number" name="phone_number" ng-pattern="/^\d*(?:\.\d{1,2})?$/">
            <p ng-show="userCreate.phone_number.$invalid && !userCreate.phone_number.$pristine" class="help-block">* Enter a valid phone number</p>
        </div>
    </div>
    </div>
    <div class="col-lg-3">
        <div class="col-lg-6 col-sm-6 col-xs-6">
            <button type="submit" class="btn btn-success btn-sm">Create User</button>
        </div>
    </div>
</form>