JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/claro/claro.css">
<body class="claro">
<div id="appContainer"></div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
JavaScript
require([
"dojo/_base/declare",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/layout/BorderContainer",
"dijit/layout/StackContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
], function(
declare
, on
, _WidgetBase
, _TemplatedMixin
, _WidgetsInTemplateMixin
, BorderContainer
, StackContainer
, TabContainer
, ContentPane){
declare('SubWidget', [ContentPane, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: '' +
' <div class="subWidget">' +
' <div style="height:100%" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget one\'">Second Widget One</div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget Two\'">Section Widget Two</div>' +
' </div>'+
' </div>',
});
var App = declare( [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: '' +
'<div>' +
' <div class="bookingDojo" data-dojo-type="dijit.layout.BorderContainer" design: \'headline\'">' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: \'center\', tabPosition: \'left-h\'">' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Main One\'">Main One</div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Main Two\'">Main Two</div>' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title: \'Complex\', tabPosition: \'top\'" >' +
' <div...