JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="FormCtrl">
        <form name="theForm" novalidate="novalidate">
            <div class="form-group" ng-class="{'has-error':theForm.password.$dirty && theForm.password.$invalid, 'has-success':theForm.password.$valid}">
                
                <label><span class="symbol required">Type Password Here</span></label>
                
                <input type="password" class="form-control" id="password" ng-model="user.password" ng-pattern="passPatternCheck" name="password" required>

                <div ng-if="theForm.password.$dirty && theForm.password.$error.pattern" class="ux-criteria">
                    <div class="ux-criteria-header font-primary-bold">Votre mot de passe doit</div>

                    <div id="Plength" class="ux-criteria-rule" aria-hidden="false">

                        <div class="ux-criteria-box"></div><span class="ux-criteria-rule-text">at least 8 characters</span>
                    </div>
                    <div id="Pcapital" class="ux-criteria-rule" aria-hidden="false">

                        <div class="ux-criteria-box"></div><span class="ux-criteria-rule-text">include capital letter</span>
                    </div>
                    <div id="Psmall" class="ux-criteria-rule" aria-hidden="false">

                        <div class="ux-criteria-box"></div><span class="ux-criteria-rule-text">include small letter</span>
                    </div>
                    <div id="Pnumber" class="ux-criteria-rule" aria-hidden="false">

                        <div class="ux-criteria-box"></div><span class="ux-criteria-rule-text">include a number</span>
                    </div>
                    <div id="Pspace" class="ux-criteria-rule" aria-hidden="true">

                        <div class="ux-criteria-box-checked"></div><span class="ux-criteria-rule-text">don't start/end with a...

CSS

.form-group {
  position: relative;
}

.form-group .text {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin-top: 7px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  cursor: default;
}


.has-error .control-label {
  color: #8e8e93 !important;
}
.has-error .error {
  color: #a94442;
}
.has-error .form-control {
  color: #5b5b60;
  border-color: #a94442 !important;
  border-width: 1px !important;
  border-style: dotted;
}
.has-error .form-control:focus, .has-error .form-control:hover {
  border-color: #F8F8F8;
  border-bottom-color: #a94442 !important;
}
.has-error label {
  color: #a94442 !important;
}

.has-warning {
  color: #eea236;
}
.has-warning .control-label {
  color: #8e8e93 !important;
}
.has-warning .form-control {
  color: #5b5b60;
  border-bottom-color: #8a6d3b !important;
  border-bottom-width: 1px !important;
  border-bottom-style: dotted;
}
.has-warning .form-control:focus, .has-warning .form-control:hover {
  border-color: #F8F8F8;
  border-bottom-color: #8a6d3b !important;
}
.has-warning label {
  color: #8a6d3b;
}

.has-success {
  color: #5cb85c;
}
.has-success .control-label {
  color: #8e8e93 !important;
}
.has-success .form-control {
  color: #5b5b60;
  border-color: #F8F8F8;
  border-bottom-color: #3c763d !important;
  border-bottom-width: 1px !important;
  border-bottom-style: dotted;
}
.has-success .form-control:focus, .has-success .form-control:hover {
  border-color: #F8F8F8;
  border-bottom-color: #3c763d !important;
}
.has-success label {
  color: #3c763d;
}

@font-face {
  font-family: Boing-Bold;
  src: url(https://img1.wsimg.com/ux/fonts/boing/1.0/Boing-Bold.eot);
  src: url(https://img1.wsimg.com/ux/fonts/boing/1.0/Boing-Bold.eot?#iefix) format("embedded-opentype"), url(https://img1.wsimg.com/ux/fonts/boing/1.0/Boing-Bold.woff2) format("woff2"), url(https://img1.wsimg.com/ux/fonts/boing/1.0/Boing-Bold.woff) format("woff"),...

JavaScript

var app = angular.module("app",[]);

app.controller("FormCtrl", function($scope) {

		$scope.user = {};
    
    $scope.passPatternCheck = (function() {
      var regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]?)[A-Za-z\d!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]{8,}/;
      return {
        test: function(value) {
          return regexp.test(value);
        }
      };
    })();
});