JSFiddle - React, Tailwind, and code Playground
by ketysek
HTML
<div class="container">
<div class="left">
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor tellus id sem volutpat fringilla. Vivamus et eleifend ante, eget imperdiet tortor. Aliquam erat volutpat. Donec in lobortis erat. Etiam vestibulum nibh nulla, vitae blandit ligula tristique in. Donec vel orci a nibh vulputate dapibus. Fusce aliquet finibus quam, ullamcorper vestibulum neque feugiat a. Etiam vulputate magna eu venenatis sodales.</p>
<p>In hac habitasse platea dictumst. Pellentesque mi quam, finibus quis eros eu, cursus consequat libero. Proin scelerisque augue vitae mauris luctus mollis ut vitae nisl. Morbi eros velit, congue et efficitur ac, iaculis et metus. Cras in tellus diam. Nullam id odio id eros laoreet consectetur at ut eros. Vestibulum placerat quam a felis vehicula dignissim.</p>
<p>Vestibulum scelerisque pulvinar neque eget consequat. Cras condimentum gravida quam, sit amet venenatis nisi. Curabitur bibendum ipsum quis magna aliquet scelerisque. Curabitur ut lacus tristique orci tincidunt imperdiet. Vestibulum fermentum neque a vulputate finibus. Donec vel arcu vulputate, scelerisque arcu volutpat, rhoncus nulla. Cras pellentesque accumsan pharetra. Nunc purus neque, mattis in erat vel, lacinia volutpat augue. Quisque tempus, eros quis posuere tempus, dui ligula vulputate urna, sit amet aliquam lacus justo sit amet erat.</p>
<p>Aliquam nunc leo, consequat eget risus at, elementum pharetra metus. Vivamus pretium imperdiet turpis a hendrerit. Cras rhoncus magna sem, eget pellentesque mauris pellentesque ut. Nulla fringilla metus purus, in euismod libero feugiat a. Etiam mollis viverra est sit amet tincidunt. Aenean consectetur massa tellus, et efficitur turpis egestas a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tristique leo sit amet diam vestibulum luctus. In commodo sed est ut suscipit.</p>
<p>Pellentesque imperdiet felis in...
CSS
body, html {
height: 100%;
background: #eee;
overflow: hidden;
}
.container {
height: 100%;
}
.left {
width: 50%;
height: 100%;
background: #333;
float: left;
}
.right {
max-height: 80vh;
transform: translateY(10%);
width: 50%;
float: right;
overflow: auto;
}
p {
margin: 15px 10px;
}