JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>
<div id="container1">
    <div id="col1">
        <div class='col-inner' data-lorem='3s'>                
            <b>Column 1</b>
            <em>30%</em>
        </div>
    </div>
    <div id="col2">
        <div class='col-inner' data-lorem='5s'>       
            <b>Column 2</b>
            <em>40%</em>
        </div>
    </div>
    <div id="col3">
        <div class='col-inner' data-lorem='3s'> 
            <b>Column 3</b>
            <em>30%</em>
        </div>
    </div>
    <div class='filler filler1'></div>
    <div class='filler filler2'></div>
    <div class='filler filler3'></div>
</div>

CSS

em {
 display:block;
text-align:center;
 border: solid 1px #111;
 font-size: 20px;
    margin: 10px auto;
    width: 50%;
}
.col-inner {
   padding: 10px;     
}
#container1 {
    float:left;
    width:100%;
    position:relative;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:#ccc;
}
#col3 {
    float:left;
    width:30%;
    background:purple;
}

.filler {
    position:absolute;
    top:0;
    bottom:0;
    z-index: -1;
}
.filler2{
    background:#ccc;
    left:30%;
    width:40%;
}
.filler1{
    background:red;
    left:0;
    width:30%;
}
.filler3 {
    background:purple;
    left:70%;
    width:30%;
}