JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div data-ng-app="myNoteApp" data-ng-controller="myNoteCtrl" style="width:400px;border:1px solid black;padding:10px;background-color:yellow" class="ng-scope">
         <h2>My Note</h2>

        <textarea data-ng-model="message" cols="40" rows="10" class="ng-pristine ng-untouched ng-valid"></textarea>
        <br/>
        <br/>
        <button data-ng-click="save()">Save</button>
        <button data-ng-click="clear()">Clear</button>
        <p>Number of characters left: <b><span data-ng-bind="left()" class="ng-binding">100</span></b>

        </p>
    </div>
    <script src="https://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myNoteApp", []);

        app.controller("myNoteCtrl", function($scope) {
            $scope.message = "";
            $scope.left = function() {
                return 100 - ($scope.message.length>100?100:$scope.message.length);
            };
            $scope.$watch('message',function(){
              if($scope.message.length>100){
                 $scope.message=$scope.message.substring(0,100);
              }
            });
            $scope.clear = function() {
                $scope.message = "";
            };
            $scope.save = function() {
                alert("Note Saved");
            };
        });
    </script>
</body>