JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<div id="main">
    <div id="head">head</div>
    <div id="content">
        <div id="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque harum sed tempora quo perferendis iste distinctio! Iure sit voluptate quae recusandae quo ratione numquam adipisci aperiam eligendi esse laborum similique?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque harum sed tempora quo perferendis iste distinctio! Iure sit voluptate quae recusandae quo ratione numquam adipisci aperiam eligendi esse laborum similique?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque harum sed tempora quo perferendis iste distinctio! Iure sit voluptate quae recusandae quo ratione numquam adipisci aperiam eligendi esse laborum similique?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque harum sed tempora quo perferendis iste distinctio! Iure sit voluptate quae recusandae quo ratione numquam adipisci aperiam eligendi esse laborum similique?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque harum sed tempora quo perferendis iste distinctio! Iure sit voluptate quae recusandae quo ratione numquam adipisci aperiam eligendi esse laborum similique?
        </div>
    </div>
    <div id="footer">footer</div>
</div>

CSS

#main {
    position: relative;
    height: 480px;
    width: 320px;
}

#head {
    background: red;
}

#content {
    background: grey;
}

#footer {
    background: green;
}



/* Layouting */
#head {
    height: 40px;
}

#footer {
    height: 60px;
    position: absolute;
    bottom: 0;
}

#content {
    position: absolute;
    top: 40px;
    bottom: 60px;
    overflow: scroll;
}

#text {
    height: 100%;
}
}