JSFiddle - React, Tailwind, and code Playground

by toddmotto

HTML

<div ng-controller="CountCtrl as vm">
    <counter count="vm.count"></counter>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
<style>
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #eee; margin: 0; padding: 25px; }

JavaScript

angular
	.module('Todo', [])
	.controller('CountCtrl', function CountCtrl() {
	  this.count = 4;
	})
	.component('counter', {
        bindings: {
          count: '='
        },
        controller: function () {
          function increment() {
            this.count++;
          }
          function decrement() {
            this.count--;
          }
          this.increment = increment;
          this.decrement = decrement;
        },
        template: [
          '<div class="todo">',
            '<input type="text" ng-model="$ctrl.count">',
            '<button type="button" ng-click="$ctrl.decrement();">-</button>',
            '<button type="button" ng-click="$ctrl.increment();">+</button>',
          '</div>'
        ].join('')
    });

document.addEventListener('DOMContentLoaded', function () {
	angular.bootstrap(document, ['Todo']);
});