JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="page">
    <div class="top">
        <div class="content1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus ipsum, posuere vitae semper pretium, aliquam et justo. Morbi hendrerit rutrum lorem, non convallis ipsum tristique in. Pellentesque ultricies, nunc nec tincidunt placerat, sapien est iaculis risus, id faucibus orci sem ac nibh. Nunc lectus nunc, ultrices facilisis hendrerit eget, sollicitudin aliquet erat. Vestibulum a leo vel ipsum consequat viverra sit amet in neque. Donec orci orci, egestas ac lobortis quis, pellentesque sed neque. Nulla facilisi. Fusce quis nulla tellus, ac auctor lorem. Sed ut lacus mauris. Nunc accumsan tincidunt dui posuere rhoncus. Sed eu mi lacus, nec adipiscing turpis. Vivamus cursus lacinia arcu, a volutpat mauris adipiscing a. Nunc dolor enim, tincidunt sed ultrices nec, eleifend sed ligula. Donec nisl odio, hendrerit id venenatis quis, dapibus ac libero. Vestibulum in accumsan tortor.

Duis sagittis placerat semper. Integer imperdiet nulla at nulla imperdiet rutrum. Proin pellentesque tempor cursus. Curabitur congue, libero non scelerisque lobortis, purus lectus blandit nisl, eu rhoncus massa nisi nec quam. Quisque interdum interdum ligula, quis tristique felis semper ac. Fusce feugiat, elit in varius placerat, justo felis varius dolor, ut feugiat dolor purus nec diam. Curabitur laoreet convallis nibh vel gravida. Nunc egestas tellus id leo vulputate commodo. Ut venenatis neque ac metus dignissim porttitor. Nunc a mauris nulla. Praesent semper, quam hendrerit egestas interdum, ante purus luctus sem, sed suscipit ipsum magna ac neque. Cras id mauris eros, vel malesuada lacus. Aliquam ligula mauris, tempus luctus ultrices vel, vestibulum sit amet erat. Integer id eros erat. Donec non turpis tortor. </div>
    </div>
    <div class="bottom">
        <div class="content2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus ipsum, posuere vitae semper pretium, aliquam et justo. Morbi...

CSS

.page {
    height: 300px;
    overflow: hidden;
    background: black;
}
.top {
    height: 40%;
    overflow: hidden;
    padding: 10px;
}
.bottom {
    overflow: hidden;
    padding: 10px;
}
.content1 {
    padding: 10px;
    border: 1px solid black;
    background: green;
    overflow: auto;
    height: 100%;
}
.content2 {
    padding: 10px;
    border: 1px solid black;
    background: green;
    overflow: auto;
    height: 100%;
}