JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6//dojo/resources/dojo.css">
    <link id="themeStyles" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css">


<div id="border1" data-dojo-type="dijit.layout.BorderContainer"
            data-dojo-props='style:"height: 500px; border: 2px solid blue;"'>

        <div  data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props='id:"border1-top", region:"top", style:"background-color:#b39b86; border: 15px black solid; height: 50px;", splitter:true'>
                           top bar (resizable)
        </div>
                                             HTML     
                                 
                                 CSS     
                 
        <div data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props='id:"border1-middle", region:"center", style:"background-color:#b39b86;"'>
                           middle bar (resizable)
        </div>
         <div data-dojo-type="dijit.layout.BorderContainer"
            data-dojo-props='region:"bottom", splitter: true, id:"border1-bottom", style:"height: 33%; border: 2px solid blue;"'>
             <div data-dojo-type="dijit.layout.BorderContainer"
                data-dojo-props='region:"left", splitter: true, id:"border1-bottom-left", style:"width: 50%; border: 2px solid blue;"'>
                <div data-dojo-type="dijit.layout.ContentPane"
                    data-dojo-props='region:"top", splitter:true, style:"height:50%"'>
                       top-left
                </div>
                <div data-dojo-type="dijit.layout.ContentPane"
                    data-dojo-props='region:"center"'>
                       bottom-left
                </div>
            </div>
             <div data-dojo-type="dijit.layout.BorderContainer"
                data-dojo-props='region:"center", id:"border1-bottom-center", style:"border: 2px solid...