JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/seankeating/ember-brunch/master/vendor/scripts/handlebars-1.0.rc.1.js"></script>
<script src="https://raw.github.com/seankeating/ember-js-example/master/vendor/scripts/ember-latest.js"></script>
<script src="https://raw.github.com/seankeating/ember-js-example/master/vendor/scripts/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<h1>Application template was rendered</h1>
<li> {{#linkTo "index"}} Home {{/linkTo}} </li>        
<li> {{#linkTo 'posts'}} Post {{/linkTo}} </li>  
    
    <br/>
<p>Injected content via application outlet is everything below.</p>
<div> {{outlet}}</div>
 </script>
    
<script type="text/x-handlebars" data-template-name="index">
    <h1> Welcome Mate! this came from index template</h1> 
</script>

<script type="text/x-handlebars" data-template-name="posts">
<h6>
from the posts template and content injected 'posts.index' via the outlet in posts.hbs!
</h6>
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
 <h5>i am from 'posts/index.hbs'.</h5>
    <br/> 
{{#each post in content}}
    <p>{{#linkTo 'posts.show' post}} {{post.title}}  {{/linkTo}}</p>
{{/each}}
<p>{{#linkTo 'posts.new'}} Create a new post {{/linkTo}}</p> 
</script>


<script type="text/x-handlebars" data-template-name="posts/show">
  <h1>Post</h1>
<p>Your content here.</p>
<h3> {{title}} </h3>
<h3> {{body}} </h3>
    <br/>
<p> {{#linkTo 'posts.index'}} back {{/linkTo}}</p>
<p> {{#linkTo 'posts.edit' content}} Edit the post  {{/linkTo}}</p>  
</script>

<script type="text/x-handlebars" data-template-name="posts/form">
  <h1>form</h1>
<form  {{action save content on="submit"}} >
{{view Ember.TextField valueBinding="title" placeholder="title" }}

{{view Ember.TextArea valueBinding="body" placeholder="body"}}
<button type="submit"> ok </button>

<button {{action cancel content}}> Cancel</button>
</form>  
</script>

<script type='text/x-handlebars'...

JavaScript

EmBlog = Ember.Application.create();

EmBlog.PostsPostController = Ember.ObjectController.extend({
  content: null
});

EmBlog.PostsEditController = Ember.ObjectController.extend({
  content: null
});

EmBlog.PostsNewController = Ember.ObjectController.extend({
  content: null
});

EmBlog.Store = DS.Store.extend({
  revision:  11,
  adapter: DS.FixtureAdapter.create()
});

EmBlog.Post = DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string')
});

EmBlog.Post.FIXTURES = 
[
  {
    id: '0',
    title: 'first title',
    body: 'first body'
  },
  {
    id: '1',
    title: 'second title',
    body: 'second post'
  },
  {
    id: '2',
    title: 'third title',
    body: 'third post'
  }
  
];

EmBlog.Router.map(function() {
  this.resource("posts", {path: '/posts'}, function(){
    this.route('new');
    this.route('show', {path: '/:post_id'}) ;
    this.route('edit', {path: '/:post_id/edit'});
  });
});

EmBlog.PostsIndexRoute  = Ember.Route.extend({
  model: function(){
    return EmBlog.Post.find();
  },
  setupController: function(controller, model){
    controller.set('content', model);
  }
});

EmBlog.PostsShowRoute = Ember.Route.extend({
  model: function(params) {
    return EmBlog.Post.find(params.post_id);
  },
  setupController: function(controller, model){
    controller.set('content', model);
  }
});
    
EmBlog.PostsNewRoute  = Ember.Route.extend({   
  model: function(){
    return EmBlog.Post.createRecord(); 
  },
  exit: function() {
    this._super();
    this.get('currentModel.transaction').rollback();
  },
  events: {
    save: function(post) {
      post.one('didCreate', this, function(){
          alert(1);
        this.transitionTo('posts.show', post);
      });
      post.get('transaction').commit();
    },
    cancel: function() {
      this.transitionTo('posts.index');
    }
  }
});
 
EmBlog.PostsEditRoute = Ember.Route.extend({
  model: function(params){
   return EmBlog.Post.find(params.post_id);
  },

  setupController:...