JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <!-- Fixed navbar -->
    <div class="navbar-inverse onepage-row" id="onepage-header" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">header</a>
            </div>
        </div>
    </div>

    <div id="onepage-content" class="onepage-row onepage-scroll-x">
        <div class="relative-to-this">
            <div id="onepage-main" class="onepage-col onepage-scroll-y">
                <div class="relative-to-this">
                    <div class="content-leftcol onepage-col onepage-scroll-y">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed eros quis turpis posuere consequat in sit amet diam. Nunc orci dolor, malesuada ac aliquet id, consequat sed urna. In quam elit, aliquam eget justo a, ultricies accumsan risus. Donec ac purus convallis, hendrerit augue at, cursus enim. Sed id felis eu turpis sagittis laoreet sed vel felis. Cras ut pulvinar lectus, tristique dapibus mi. Nam lacinia enim non placerat varius. Vivamus turpis nunc, sollicitudin in eros vel, interdum mattis nisi. Ut turpis leo, lobortis sed enim at, feugiat lacinia leo. Morbi pellentesque urna in nisi dapibus mattis. Fusce eget vestibulum quam, sed dictum dolor.
                        Praesent at sollicitudin dolor. Vestibulum gravida leo turpis, non sollicitudin metus luctus sed. Fusce id dui sed diam pretium dictum. Nulla bibendum eleifend velit id faucibus. Proin fringilla id elit vel aliquam. Etiam ultricies neque nec massa dignissim vehicula. Aliquam hendrerit, ipsum vel fermentum posuere, justo nisl tristique libero, id aliquam enim orci sed dolor. Nullam vulputate dui massa, malesuada lacinia odio imperdiet at. Donec sed egestas dolor. Integer leo tellus, pharetra vel quam sit amet, aliquet scelerisque lorem. Etiam volutpat erat ut sem tristique, ac sodales lorem vehicula.
                        Aenean placerat euismod tincidunt. Phasellus tempor...

CSS

/* The html and body elements cannot have any padding or margin. */
html,
body {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
}

/* rows and columns */
.onepage-row, .onepage-col {
    overflow: hidden;
    position: absolute;
    border-radius: 0;
}
.onepage-row { left: 0; right: 0; }
.onepage-col { top: 0; bottom: 0; }
.onepage-scroll-x { overflow-x: auto; }
.onepage-scroll-y { overflow-y: auto; }

/* new absolutely positioned rows and columns can be placed relative to this container */
.relative-to-this {
    position: relative;
    width: 100%;
    height: 100%;
}

/* define header, content and footer areas */
#onepage-header { height: 30px; top: 0; }
#onepage-content { top: 30px; bottom: 30px; }
#onepage-footer { height: 30px; bottom: 0; }

/* define main content area and right sidebar */
#onepage-main { left: 0px; right: 200px; }
#onepage-right { width: 200px; right: 0px; }

/* divide the main content area in three columns of equal width */
.content-leftcol { left:0; width: 33%; }
.content-centercol { left: 33%; right: 33%; }
.content-rightcol { right:0; width: 33%; }

/* some extra styling */

#onepage-content {
    background-color: #f5f5f5;
}

#onepage-footer {
    background-color: #c0c0c0;
    border-top: 1px solid #555555;
    padding: 15px 0 15px 0;
}

#onepage-main {
    background-color: #f5f5f5;
}

#onepage-right {
    background-color: #e0e0e0;
    border-left: 1px solid #555555;
    padding: 10px;
}

.content-leftcol {
    background-color: #f5f5f5;
    padding: 10px 5px 10px 10px;
}

.content-centercol {
    background-color: #f5f5f5;
    padding: 10px 5px 10px 5px;
}

.content-rightcol {
    background-color: #f5f5f5;
    padding: 10px 10px 10px 5px;
}