JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
        <script type="text/template" id="nav-template">
            This is nav-template
            <div id="breadcrumbs"></div>
            <div id="options"></div>
        </script>
        
        <script type="text/template" id="breadcrumbs-template">
            This is breadcrumbs-template
        </script>
        
        <script type="text/template" id="options-template">
            This is options-template
        </script>
        
        <script type="text/template" id="content-template">
            This is content-template
        </script>

        <div id="main">
            <div id="nav">
                Navigate
            </div>
            <div id="content">
                Content
            </div>
                
        </div>

JavaScript

App = new Backbone.Marionette.Application();
App.addRegions({
    'nav': '#nav',
    'content': '#content'
});

var NavigationLayout = Backbone.Marionette.Layout.extend({
    template: '#nav-template',
    regions: {
        breadcrumbs: '#breadcrumbs',
        optionsRegion: '#options'
    }
});

var BreadcrumbsView = Backbone.Marionette.ItemView.extend({
    template: '#breadcrumbs-template',
});

var OptionsView = Backbone.Marionette.ItemView.extend({
    template: '#options-template'
});

var ContentView = Backbone.Marionette.ItemView.extend({
    template: '#content-template'
});

App.addInitializer(function(options) {
    var navigationLayout = new NavigationLayout();

    App.nav.show(navigationLayout);
    App.content.show(new ContentView());

    navigationLayout.breadcrumbs.show(new BreadcrumbsView());
    navigationLayout.optionsRegion.show(new OptionsView());
});

$(function() {
    App.start();
});