JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="home">
  Welcome to my application!
</script>
<script type="text/x-handlebars" data-template-name="profile">
  Check out my profile!
  <ul>
    <li><a {{action viewPosts}}>Posts</a></li>
    <li><a {{action viewPhotos}}>Photos</a></li>
  </ul>
  {{outlet section}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
  Viewing posts...
</script>
<script type="text/x-handlebars" data-template-name="photos">
  Viewing photos...
</script>
<script type="text/x-handlebars" data-template-name="navbar">
  <ul>
    <li><a {{action goHome}}>Home</a></li>
    <li><a {{action viewProfile}}>My Profile</a></li>
  </ul>
</script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>My Ember Application</h1>
  {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
  <div class="content">
    {{outlet}}
  </div>
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
  padding: 1em;   
}

JavaScript

App = Em.Application.create();

// Instantiated and wired up for you in App.initialize()
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});
App.NavbarController = Em.Controller.extend();
App.NavbarView = Em.View.extend({
    templateName: 'navbar'
});
// Your stuff
App.HomeController = Em.Controller.extend({});
App.HomeView = Em.View.extend({
    templateName: 'home'
});

App.ProfileController = Em.Controller.extend({});
App.ProfileView = Em.View.extend({
    templateName: 'profile'
});

// Nested views in the profile
App.PostsController = Em.Controller.extend({});
App.PostsView = Em.View.extend({
    templateName: 'posts'
});

App.PhotosController = Em.Controller.extend({});
App.PhotosView = Em.View.extend({
    templateName: 'photos'
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        goHome: Ember.Route.transitionTo('home'),
        viewProfile: Ember.Route.transitionTo('profile'),

        // STATES
        home: Em.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                var appController = router.get('applicationController');
                //appController.connectOutlet('navbar', App.NavbarView);
                //appController.connectOutlet(App.HomeView);
                appController.connectOutlet('home');
            }
        }),

        profile: Em.Route.extend({
            route: '/profile',
            connectOutlets: function(router, context) {
                //router.get('applicationController').connectOutlet(App.ProfileView);
                router.get('applicationController').connectOutlet('profile');
            },

            // EVENTS
            viewPosts: Ember.Route.transitionTo('posts'),
            viewPhotos: Ember.Route.transitionTo('photos'),

            // STATES
            posts: Em.Route.extend({
               ...