JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.min.css">
<body>
    <div id="ui-container"></div>
    
<script type="text/template" id="layout">
    <div id="main-container">
        <div id="tab-labels"></div>
        <div id="tab-containers"></div>
    </div>
</script>

<script type="text/template" id="tab-label">
<a href="#div-<%= tabID %> "id="a-<%= tabID %>"> <%= tabID %></a>
<span class="ui-icon ui-icon-close" role="presentation" data-tab-id="<%= tabID %>">Remove Tab</span>
</script>
    
<script type="text/template" id="tab-container">
<%= tabContent %>
</script>

</body>

JavaScript

App = new Marionette.Application();

App.addRegions({
    mainRegion: "#ui-container"
});

App.MainLayout = Marionette.Layout.extend({
    template: "#layout",
    regions: {
        tabLabels: "#tab-labels",
        tabContainers: "#tab-containers"
    }
});

App.mainLayout = new App.MainLayout();
App.mainRegion.show(App.mainLayout);

TabLabel = Marionette.ItemView.extend({
    template: "#tab-label",
    tagName: "li",
    events: {
        "click .ui-icon-close": "closeTab"
    },
    closeTab: function (e) {
        e.stopPropagation();
        e.preventDefault();
        this.model.collection.remove(this.model);
        $("#main-container").tabs("refresh");
        this.close();
    }
});

TabContainer = Marionette.ItemView.extend({
    template: "#tab-container",
    tagName: "div",
    onBeforeRender: function () {
        this.$el.attr("id", "div-" + this.model.get("tabID"));
    },
});

TabLabels = Marionette.CollectionView.extend({
    tagName: "ul"
});

TabContainers = Marionette.CollectionView.extend({
    tagName: "div"
});

var TabsCollection = Backbone.Collection.extend();

App.on("initialize:after", function () {

    tabs = new TabsCollection([{
        tabLabel: "Tab-1",
        tabContent: "Tab-1 Content",
        tabID: "tab1"
    }, {
        tabLabel: "Tab-2",
        tabContent: "Tab-2 Content",
        tabID: "tab2"
    }]);
    
    console.log(tabs);

    var tabLabelView = new TabLabels({
        itemView: TabLabel,
        collection: tabs
    });

    var tabContainerView = new TabContainers({
        itemView: TabContainer,
        collection: tabs
    });

    
    App.mainLayout.tabLabels.show(tabLabelView);
    App.mainLayout.tabContainers.show(tabContainerView);

    $("#main-container").tabs();

});

App.start();