JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="FormCtrl">
        <form name="theForm" novalidate="novalidate">
            <div class="form-group" >
                
                <label><span class="symbol required">Type Password Here</span></label>
                
                <input id="pwd" type="password" class="form-control" id="password" ng-model="user.password"  name="password" ng-trim="false">

                <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" ng-class="{'ux-criteria-box-checked' : passwordField.charLength}"></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" ng-class="{'ux-criteria-box-checked' : passwordField.hasCapital}"></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" ng-class="{'ux-criteria-box-checked' : passwordField.hasSmall}"></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 " ng-class="{'ux-criteria-box-checked' : passwordField.hasNumber}"></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" ng-class="{'ux-criteria-box-checked' :...

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 = {password: ""};
    $scope.passwordField = {};
    var hasUppercase = /[A-Z]/;
    var hasLowercase = /[a-z]/;
    var hasNumber = /\d/;
    
    var check = angular.element(document.querySelector('#pwd'));
    $scope.$watch('check', function(n, o){
    	if(n){
      	if(n.length >= 8){
        	$scope.passwordField.charLength = true;
        } else if(n.length < 8) {
        	$scope.passwordField.charLength = false;
        }
      	
      }else {
      	$scope.passwordField.charLength = false;
      }
      if(hasUppercase.test(n)) {
      	$scope.passwordField.hasCapital = true;
      } else {
      	$scope.passwordField.hasCapital = false;
      }
      if(hasLowercase.test(n)) {
      	$scope.passwordField.hasSmall = true;
      }else {
      	$scope.passwordField.hasSmall = false;
      }
      
      if(hasNumber.test(n)) {
      	//console.log(n);
      	$scope.passwordField.hasNumber = true;
      } else {
      	$scope.passwordField.hasNumber = false;
      }
      if(n)  {
      if((n.charAt(0) == " " || n.charAt(n.length - 1) == " ")){
      	$scope.passwordField.hasSpace = true;
        } else {
        	$scope.passwordField.hasSpace = false;
          console.log($scope.user.password)
        }
      }else {
      	$scope.passwordField.hasSpace = false;
      }
    });
    
});