JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id="main">
    <article>
        <header><span>
            This is the Title
            </span></header>
        <div id="content-row">
            <div id="content-cell">
            <div id="content">
           
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
            This is the content.<br />
                
            </div>
        </div>
        </div>
    </article>
</div>

CSS

#main {
    width: 300px;
    height: 100%;
    background:Khaki;
    position: absolute;
}
article {
    display: table;
    width: 80%;
    height:100%;
    margin: 0 auto;
    background: Peru;
} 
article header {
    display: table-row;
    height: 0;
    background: SaddleBrown;
} 
article header span {
    display: table-cell;
    padding: 20px;
}
#content-row {
    display: table-row;
    background: GoldenRod;
} 
#content-cell {
    display: table-cell;
    padding: 10px;
} 
#content {
    background: LightGoldenRodYellow;
    height: 100%;
    overflow: auto;
}