JSFiddle - React, Tailwind, and code Playground

by shadeglare

HTML

<div id="container">
    <div id="head" contentEditable="true">test</div>
    <div id="content" contentEditable="true">test</div>
    <div id="foot" contentEditable="true">test</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
    display: grid;
    width: 30em;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 100%;
    margin: 0 auto;
}
#head {
    overflow: auto;
    max-height: 5em;
    grid-row: 1;
    grid-column: 1;
    border-bottom: 1px solid #ddd;
}
#content {
    overflow: auto;
    grid-row: 2;
    grid-column: 1;
}
#foot {
    overflow: auto;
    border-top: 1px solid #ddd;
    grid-row: 3;
    grid-column: 1;
    max-height: 5em;
}