JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="row layout1">
    
    <div class="col col1">
        <div class="box">1</div>
    </div>
    
    <div class="col col2">
        <div class="box">2</div>
    </div>
    
    <div class="col col3">
        <div class="box">3</div>
    </div>
    
    <div class="col col4">
        <div class="box">4</div>
    </div>
   
</div>

<hr/>

<div class="row layout2">
    
    <div class="col col1">
        <div class="box">1</div>
    </div>
    
    <div class="col col2">
        <div class="box">2</div>
    </div>
    
    <div class="col col3">
        <div class="box">3</div>
    </div>
    
    <div class="col col4">
        <div class="box">4</div>
    </div>
   
</div>

CSS

.row {
    overflow: hidden;
    min-height: 1px;
}

.col {
    float: left;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.box {
    padding: 0 5px;
    font: bold 20px/30px arial, verdana, sans serif;
    color: #FFF;
    background-color: #CCC;
    border-radius: 2px;
    height: 100px;
}


/* layout1 */

.layout1 > .col {
    width: 33.333333333%;
}

.layout1 > .col3,
.layout1 > .col4 {
    /*float: right;*/
}


/* emulate content */
.layout1 > .col1 > .box {
    height: 220px;
}

.layout1 > .col2 > .box {
    height: 110px;
}


/* layout2 */

.layout2 > .col1 {
    width: 66.6666666666%;
}
.layout2 > .col2,
.layout2 > .col3,
.layout2 > .col4 {
    width: 33.333333333%;
}

/* emulate content */
.layout2 > .col1 > .box {
    height: 340px;
}