JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
        <div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
            <div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">
                <div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false" open="false">
                    <div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
                        <div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">Tab 1 content</div>
                        <div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">Tab 2 content</div>
                        <div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">Tab 3 content</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#map {
    padding:0;
}

JavaScript

dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.TabContainer");