JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<div id="content"></div>

<script type="text/x-handlebars" data-template-name="index">
<div class="block">
	{{#each tab in App.TabController.tabs}}
		{{#view App.TabView}}
			{{tab}}
		{{/view}}
	{{/each}}
</div>
<div class="block">
	{{#each tab in App.TabController.tabs}}
		{{view App.TabInputView}}
	{{/each}}
</div>
</script>

CSS

#content {
    margin: 20px;
}
.block {
    margin-top: 10px;
}
.block a {
    cursor: pointer;
    float: left;
    margin: 0 10px 10px;
}
.active {
    font-weight: bold;
}
textarea {
    clear: left;
    display: block;
    width: 200px;
    height: 200px;
}

JavaScript

window.App = Ember.Application.create({
	rootElement: '#content'
});

App.TabController = Ember.ArrayController.create({
    tabs: ['Tab1','Tab2'],
	activeTab: 'Tab1'
});

App.TabInputView = Ember.TextArea.extend({
    placeholder: 'Empty Area',
    isVisible: function(s) {
        var activeTab = App.TabController.get('activeTab');
        return true;
    }.property('App.TabController.activeTab')
});

App.TabView = Ember.View.extend({
	tagName: 'a',
	classNameBindings: ['active'],
	active: function() {
		var activeTab = App.TabController.get('activeTab'),
			tab = this._parentView.get('content');
		if(tab === activeTab) {
			return true;
		}
	}.property('App.TabController.activeTab'),
	click: function(event) {
		var tabTitle = Ember.View.views[event.target.id]['_parentView']['content'];
		App.TabController.set('activeTab', tabTitle);
	}
});

App.Router.map(function() {
	this.resource('index', {path: '/'});
});