JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="container">
<div class="section">
<h1>Side 1</h1>
Nunc pulvinar pellentesque faucibus. Phasellus non metus eget felis ultricies dignissim. Phasellus vel viverra ligula. Morbi vestibulum congue odio, quis mattis nibh lacinia in. Ut pretium volutpat velit, eu aliquet augue pellentesque sit amet. Donec placerat mi sed finibus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. In in bibendum nisl. Phasellus maximus justo ac congue cursus. Suspendisse dictum risus sed tincidunt euismod. Sed feugiat semper orci, vel porttitor enim malesuada non. Nunc feugiat ante libero, sit amet congue elit semper in.
Maecenas faucibus lacus quis nibh volutpat, vitae tincidunt sapien scelerisque. Praesent aliquam id magna ut ultrices. Suspendisse porttitor, diam a vehicula ornare, nulla mi ultrices dui, vel condimentum lectus odio quis felis. Maecenas et ligula sed nisl interdum lacinia sit amet nec tortor. Sed nisl massa, posuere in euismod in, vulputate porta ante. Integer vulputate lorem et felis viverra mollis. Vestibulum et elit eleifend, porta ante ac, interdum neque. Aenean varius eros ac leo tempor, sed tincidunt leo fermentum. Morbi a dignissim elit, id sagittis nisi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius enim nec pellentesque feugiat. Mauris quis purus placerat, porttitor sapien non, rhoncus ex. Duis imperdiet purus sit amet nunc viverra pulvinar. Maecenas non risus sit amet ligula tempus aliquam at vel nunc. Fusce euismod nibh tortor, vitae mattis ligula congue vitae. Suspendisse euismod, tortor et molestie maximus, ante massa vestibulum turpis, eget interdum nibh elit vel erat. Aliquam in mi at arcu faucibus efficitur sit amet at ipsum. Etiam venenatis, nibh at molestie porta, urna ipsum congue quam, in aliquet leo velit vitae velit.
<div class="section" id="green"></div>
<div class="section"...
CSS
html, body {
overflow: hidden;
}
div.container {
height: 100vh;
width: 49%;
display: inline-block;
background-color: #ccc;
overflow-y: hidden;
padding: 0;
}
h1 {
text-align: center;
}
.section {
height: 100vh;
overflow: auto;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}