JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>Demo ng-init Directive</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <style>
      *{margin:0;}
      body{padding: 20px}
      input {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
      }
      input.ng-invalid {
        color:white;
        background: red;
      }

    </style>
<script>
 angular.module('MyApp', [])
             .controller('ExampleController', ['$scope', function($scope)
        {
          $scope.message = {
            title: 'Tinh tong hai so',
            num1: 'So thu nhat',
            num2: 'So thu hai',
            total: "Tong hai so:",
            error_invalid: "Error: Phai nhap vao so nguyen duong!"
          };
          $scope.error = 'display:none';
          $scope.show_result = function()
          {
            if ($scope.totalForm.$valid) {
              $scope.error = 'display:none';
              $scope.result = {
                total: parseInt($scope.so_thu_nhat) + parseInt($scope.so_thu_hai),
              };
            }
            else {
              $scope.error = 'display:block; color: red';
            }
          };
        }
      ]);
</script>
</head>
 <body ng-app="MyApp">
    <form name="totalForm" ng-controller="ExampleController">
      <h1>{{message.title}}</h1>
      <h5>{{message.num1}}:</h5>
      <input ng-model="so_thu_nhat" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <h5>{{message.num2}}:</h5>
      <input ng-model="so_thu_hai" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <div>{{message.total}} {{result.total}}</div>
      <div style='{{error}}'>
        {{message.error_invalid}}
      </div>
    </form>
  </body>
</html>