JSFiddle - React, Tailwind, and code Playground

by gwwar

HTML

<div class="container">
    <div class="col-full">
        Header
    </div>
    <div class="container">
        <div class="col-2">
           Left
        </div>
        <div class="col-8">
            Main
        </div>
        <div class="col-2">
            Right
        </div>
    </div>
    <div class="col-full">
        Footer
    </div>
</div>

CSS

[class*='col-'] {
  float: left;
}

.container {
    width:100%;
    overflow:auto;
}

.col-full {
    width: 100%;
    background: red;
    opacity:0.5;
    min-height:100px;
}

.col-2 {
    width: 16.6%;
    background:blue;
    opacity:0.5;
    min-height:200px;
}

.col-8 {
    width:66.8%;
    background: green;
    opacity:0.5;
    min-height:200px;
}