JSFiddle - React, Tailwind, and code Playground

by dmachi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<body class="claro">
    <div dojoType="dijit.layout.BorderContainer" id="mainLayer">
        <div  dojoType="dijit.layout.ContentPane" region="top">
            Header Goes Here
            <br>
            TabController Goes Here
        </div>
        <div dojoType="dijit.layout.TabContainer" region="center">
            
            <div dojoType="dijit.layout.BorderContainer" class="full" title="Home">
                <div dojoType="dijit.layout.ContentPane" region="center" style="width:100%">
                    Payments Inbox
                </div>  
                <div dojoType="dijit.layout.BorderContainer" region="right" style="width: 100px">
                    <div dojotype="dijit.layout.ContentPane" region="top" splitter="true" style="height: 75px">
                        Search
                    </div>
                    <div dojoType="dijit.layout.ContentPane" region="center">
                        Alerts Inbox
                    </div>
                </div> 
                 <div dojoType="dijit.layout.TabContainer" region="bottom" style="height:100px">
                        <div dojoType="dijit.layout.ContentPane" title="Current Day - Cash Position">
                            Current Day Cash Position
                        </div>
                        <div dojoType="dijit.layout.ContentPane" title="Previous Days - Cash Postion">
                            Previous Day Cash Position
                        </div>
                    </div>
            </div>
            
            
            <div dojoType="dijit.layout.ContentPane" title="Payments"></div>
            <div dojoType="dijit.layout.ContentPane" title="Reporting" href="/path/to/Reports"></div>
            <div dojoType="dijit.layout.ContentPane" title="Admin"></div>
        </div>
        <div dojoType="dijit.layout.ContentPane" region="bottom">
           ...

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

#mainLayer, .full {
    width: 100%;
    height: 100%;  
}

JavaScript

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