JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

CSS

.flame-tab-view-content {
    border: 1px solid #aaa;
}

JavaScript

// A very simple example of using Flame.TabView. You can use the
// 'nowShowing' property on the tab view to track which tab is
// currently shown, if needed.

App = Ember.Application.create();

App.RootView = Flame.RootView.extend({
    childViews: ['tabView'],

    tabView: Flame.TabView.extend({
        layout: { left: 20, top: 20, right: 20, bottom: 20 },
        tabs: [
            { title: 'First', value: 'firstTab' },
            { title: 'Second', value: 'secondTab' }
        ],
        
        firstTab: Flame.LabelView.extend({
            layout: { centerX: 0, centerY: 0 },
            textAlign: Flame.ALIGN_CENTER,
            value: 'This is the first tab'
        }),
        
        secondTab: Flame.LabelView.extend({
            layout: { centerX: 0, centerY: 0 },
            textAlign: Flame.ALIGN_CENTER,
            value: 'This is the second tab'
        })
    })       
});