JSFiddle - React, Tailwind, and code Playground

by holf

HTML

<div id="header">Header</div>
<div id="outerMiddle">
    <div id="middleMiddle">
        <div id="nav">
            Navigation<br/>link 1<br/> link 2
        </div>
        <div id="main">
            <div id="details">
                Details
            </div>
            <div id="toolbar">
                Button1 Button2 Button3 Button4 Button5
            </div>
            <div id="transcriptionWrapper">
                <div id="transcription">
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                    <div class="proceduralElement" contenteditable="true">
                        <span>Q Mr James Arbuthnot</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

    
<div id="footer">Footer</div>

CSS

#footer {
    position: absolute;
    bottom: 0px;
    height: 20px;
    background-color: #DDDDDD;    
    width: 100%;            
}

#header{
    position: absolute;
    top: 0px;
    height: 20px;
    background-color: #DDDDDD;    
    width: 100%;            
}

#outerMiddle {
    position: fixed;
    top: 20px;
    bottom: 20px;
    left 0px;
    right 0px;
    width: 100%;            
}

#middleMiddle{
    display: table;
    height: 100%;
    width: 100%;
    background-color: #ccccba;
    margin: 0;
}

#nav{ 
    display: table-cell;
    height: 100%;
    background-color: #BACCCC;
    resize: horizontal;
    overflow: auto; }

#main {
    display: table-cell;
    height: 100%;
}

#details{
    background: #ccbacc;
    width: 100%;
}


#transcriptionWrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: table;
}

#transcription {
}

.proceduralElement{
    height: 50px;   
}