JSFiddle - React, Tailwind, and code Playground

by alexpop

HTML

<div class="outer">
    <div class="block-wrap">
        <div class="block"></div>
    </div>
    <div class="block-wrap">
        <div class="block"></div>
    </div>
    <div class="block-wrap">
        <div class="block"></div>
    </div>
    <div class="block-wrap">
        <div class="block"></div>
    </div>
</div>
<div class="outer second">
    <div class="block-wrap">
        <div class="block"></div>
    </div>
    <div class="block-wrap">
        <div class="block"></div>
    </div>
    <div class="block-wrap">
        <div class="block"></div>
    </div>
</div>

CSS

.outer {
    background: none repeat scroll 0 0 #333333;
    overflow: hidden;
    padding-right: 100px;
    position: relative;
    margin-bottom:2px
}
.block {
    background: none repeat scroll 0 0 red;
    min-height: 100px;
    outline: 1px solid #000000;
    width: 100px;
}
.block-wrap {
    float: left;
    width: 33.33%;
}
.block-wrap:last-child {
    float:right;
    margin-right:-100px;
    width:100px;
}
.second .block-wrap {
    float: left;
    width: 50%;
}
.second .block-wrap:last-child {
    width:100px;
}