JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<body>
    <header>Header</header>
    <div class=content>
        <div class="content-left">Left</div>
        <div class="content-right">Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right</div>
        <div class="content-center">Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center Center</div>
    </div>
    <footer>Footer</footer>
</body>

CSS

* {
    margin: 0;
    padding: 0;    
}

html, body {
    width: 100%;
    height: 100%;
}

header, footer { 
    height: 50px; 
    background: red; 
    width: 100%; 
}

.content {
    width: 100%;    
    background: green;
}

.content:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.content-left {
    float: left;
    width: 20%;
    background: #88AAFF;
}

.content-right {
    float: right;
    width: 20%;
    background: #AA88FF;
}

.content-center {
    width: 80%;
    margin: 0 20%;
    background: #4444FF;
}