JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="wrap">
    <div class="header">header</div>
    <div class="cont">
        <div class="content">
            <div class="left">left</div>
            <div class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue blandit lectus blandit convallis. Ut eleifend sapien blandit ultrices sodales. Cras imperdiet ut libero ut luctus. Pellentesque sed sapien malesuada, iaculis nisi id, tristique metus. Donec nulla metus, tincidunt id risus vel, ultrices tempor diam. Aenean auctor eu libero sit amet vestibulum. Nullam et justo non lacus bibendum lacinia eu eu metus.

Donec pretium elit risus, at rhoncus massa posuere cursus. Mauris aliquet quam sed nisi semper, ut mollis dolor hendrerit. Sed eu orci eget ligula tempor feugiat. Morbi facilisis porta vestibulum. Nunc at tempus ante, vel commodo augue. Maecenas vitae nisi sed dui rhoncus mattis in vel nibh. Suspendisse tristique metus quis odio eleifend accumsan. Duis varius at magna in aliquam. Fusce cursus arcu at lacus tincidunt feugiat. Cras elementum malesuada mauris id malesuada. Etiam a vestibulum dolor, mollis sagittis quam. Quisque blandit diam sed sem malesuada fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at ipsum a metus adipiscing aliquam. Sed semper tellus non massa rhoncus, vitae blandit mauris porta. Proin nec felis in nisl luctus sollicitudin.

Duis luctus magna sit amet leo porta porttitor. Sed imperdiet dui sit amet ipsum feugiat aliquam. Vivamus eu augue consectetur, sodales nibh sed, vehicula orci. Praesent at tempor eros, sit amet gravida orci. Donec ac lacus in diam fermentum aliquet vel id ligula. Suspendisse molestie nisl lacus, et lacinia turpis feugiat in. Sed et felis id tellus egestas convallis. Cras fermentum lobortis tempus. Proin laoreet nec nisl mollis luctus. Praesent fermentum pulvinar blandit. Morbi lacinia euismod lectus ut fringilla. Vestibulum risus mauris, pharetra id...

CSS

body,html {
	height: 100%;
}
.wrap {
	min-height: 100%;
	margin: 0 auto -60px;
    position:relative;
}
.header {
    height:50px;
    background: #021456;
}
.footer {
	height: 60px;
    background:green;
}
.cont {
    position:absolute;
    top:50px;
    bottom:60px;
    left:0;
    right:0;
    margin:0 auto;
}
.content {
    margin: 0 auto;
    width:400px;
    height:100%;
}
.left, .right {
    height:100%;
}
.left {
    float:left;
    background:#ef4578;
}
.right {
    background:#425633;
}