JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

<div>
    <parent-component>
      <child-component></child-component>
    </parent-component>
</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('app', [])

.component('parentComponent', {
  transclude: true,
  template: '<div ng-transclude></div>'
})

.component('childComponent', {
  bindings: {
    count: '='
  },
  controller: function () {
    this.state = 'Not loaded';
    this.$onInit = function() {
      this.state = 'Loaded!';
    };
  },
  template: [
    '<div>',
    	'Component: {{ $ctrl.state }}',
    '</div>'
  ].join('')
})
;

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