JSFiddle - React, Tailwind, and code Playground

by kenbuja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Nested BorderContainer</title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

    <!--<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>-->

</head>
<body class="claro">
    <div style="height: 500px; width: 500px" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: true">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">header</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true, design: 'headline', gutters: false">
            <div style="width: 100px" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region: 'center', splitter: true, design: 'headline'">
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center2</div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">bottom2</div>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center1</div>
    </div>

    <script>
        require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function (parser) {
            parser.parse();
        });
    </script>
</body>
</html>