JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

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

CSS

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

div[ng-app] {
  padding: 50px;
}

input {
  border: 0;
  padding: 4px 10px;
  margin: 10px 0 0;
  outline: 0;
  height: 30px;
}
button {
  background: #222933;
  border: 0;
  color: #fff;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
  outline: 0;
}

JavaScript

/*! angular-component v0.0.1 | (c) 2015 @toddmotto | https://github.com/toddmotto/angular-component */
!function(){function t(t,n){if(n&&"string"==typeof n)return n;if("string"==typeof t){var e=/^(\S+)(\s+as\s+(\w+))?$/.exec(t);if(e)return e[3]}}function n(){function n(n,e){function o(r){function o(t){return angular.isFunction(t)?function(n,e){return r.invoke(t,this,{$element:n,$attrs:e})}:t}return{controller:e.controller||angular.noop,controllerAs:t(e.controller)||e.controllerAs||n,template:o(e.template||e.templateUrl?e.template:""),templateUrl:o(e.templateUrl),transclude:void 0===e.transclude?!0:e.transclude,scope:e.isolate===!1?!0:e.bindings,bindToController:!!e.bindings,restrict:e.restrict||"E"}}return e.$canActivate&&(o.$canActivate=e.$canActivate),e.$routeConfig&&(o.$routeConfig=e.$routeConfig),o.$inject=["$injector"],r.directive(n,o)}var r=e.apply(this,arguments);return r.component=n,r}var e=angular.module;angular.module=n}();


angular
.module('app', [])
.component('counter', {
    bindings: {
      count: '='
    },
    controller: 'CounterCtrl',
    template: function ($element, $attrs) {
      return [
        '<div class="counter">',
          '<p>Counter component</p>',
          '<input type="text" ng-model="counter.count">',
          '<button type="button" ng-click="counter.decrement();">-</button>',
          '<button type="button" ng-click="counter.increment();">+</button>',
        '</div>'
      ].join('');
    }
})
.controller('CounterCtrl', function CounterCtrl() {
  function increment() {
    this.count++;
  }
  function decrement() {
    this.count--;
  }
  this.increment = increment;
  this.decrement = decrement;
})
.controller('MainCtrl', function MainCtrl() {
  this.count = 4;
});