JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.js"></script>
<div ng-app="myApp" ng-controller="myController">
<md-input-container>
    <label class="userlabel">Username</label>
    <input ng-model="credentials.username" type="text" ng-required="true" aria-label="password" class="inputtext"/>

</md-input-container>
</div>

CSS

.md-input.ng-invalid.ng-dirty {
    border-color: #FA787E;

}
.md-input.ng-valid.ng-dirty {
    border-color: #78FA89;

}

JavaScript

var app = angular
  .module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial'])
  .controller('myController', function ($scope) {
      $scope.credentials = {};
  });