JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http:////cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/release/ember.prod.js"></script>
<script type="text/x-handlebars">
    <div>
        {{#link-to "charts" class="tab-item"}}
            Charts
        {{/link-to}}
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="charts">
    <div>
        {{#link-to 'charts.index' class="control-item"}}
            Latest Chart
        {{/link-to}}
        {{#link-to 'charts.archive' class="control-item"}}
            Chart Archive
        {{/link-to}}
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="charts/index">
    index
</script>
<script type="text/x-handlebars" id="charts/archive">
    archive
</script>

CSS

a, a:visited {
    color: blue;
}
a.active {
    color: red;
}

JavaScript

window.App = Ember.Application.create();

App.Router.map(function () {
    this.resource('charts', function () {
        this.resource('charts.archive');
    });
});