JSFiddle - React, Tailwind, and code Playground

by Albertobeiz

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form novalidate name="form" class="css-form">
    Nombre: <input type="text" ng-model="user.name" name="name" required /><br />
      <span ng-show="form.name.$error.required">Nombre obligatorio</span><br/>
      
    E-mail: <input type="email" ng-model="user.email" name="email" required /><br />
      
      <span ng-show="form.email.$error.email">Email no válido</span><br/>
      
      <span ng-show="form.email.$error.required">Email obligatorio</span><br/>
      
    Sexo: <input type="radio" ng-model="user.gender" value="male" />hombre
    <input type="radio" ng-model="user.gender" value="female" />mujer<br />
    <input type="submit" ng-disabled ="form.$invalid" value="Guardar" />
    <input type="submit" ng-click ="reset()" value="Reset" />
    <div ng-show="form.$submitted"> Formulario enviado</div>
  </form>
  <pre>user: {{ user }}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.reset = function() {
        $scope.user = {};
      };
    }]);
</script>
</body>

CSS

.css-form input.ng-invalid.ng-touched {
    background-color: #FA787E;
  }

  .css-form input.ng-valid.ng-touched {
    background-color: #78FA89;
}