JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="bcNode" style="width:400px;height:200px"></div>
<hr/>
<div id="tcNode" style="width:400px;height:200px"></div>

CSS

@import url("http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css");
@import url("http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css");

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

dojo.ready(function(){
    dojo.addClass(dojo.body(), "claro"); 

    // Configure a ContentPane instance as BorderContainer child
    var bc = new dijit.layout.BorderContainer({ /* ...*/ }, "bcNode");
    var topPane = new dijit.layout.ContentPane({
        region: 'top',
        content: '<p>The top region</p>',
        style: 'height:60px;',
        splitter: true,
        minSize: 32
    });

    // add pane and complete initialization with call to start();
    bc.addChild(topPane);
    bc.startup(); // will startup all children

    // Configure ContentPane instance as TabContainer child
    var tc = new dijit.layout.TabContainer({ style: 'height: 200px;width:200px' /* ...*/ }, "tcNode");
    var firstTab = new dijit.layout.ContentPane({
        title: "First Tab",
        content: '<p>The first tab</p>',
        loadingMessage: 'Please wait while that loads...',
        closable: true,
        refreshOnShow: true
    });

    // add pane and complete initialization with call to start();
    tc.addChild(firstTab);
    tc.startup(); // will startup all children

});