JSFiddle - React, Tailwind, and code Playground

by surjithctly

HTML

<div id="container">
    <div id="head"> <div contentEditable="true"> I'm headg </div> </div>
     <div id="content"> <div contentEditable="true">   content  </div>  </div>
    <div id="foot"> <div contentEditable="true">  I'm footer  </div> </div>
</div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding 0;
    font-family: Helvetica;
    color: #666;
}
#container {
    width: 30em;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 100%;
    display:table;
    margin:0 auto;
}

#head, #content, #foot {
    display:table-row;
    background:grey;
}

#head {
    height:10%;
}

#head div {
    max-height:5em; 
    overflow:auto;
}

#foot {
    height:10%;
}

#foot div {
    max-height:5em; 
    overflow:auto;
}

#content {
    background:white;
}

#content div {
    max-height:100%; 
    height:100%;
    overflow:auto;
}