JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="lead">
    <div class="bigImage"></div>
    <div class="info"></div>
</div>

<div class="left">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

.lead{
    width: 100%;
    background: orange;
}
.bigImage{
    width: 100%;
    height: 100px;
    background:green;
}
.info{
    width: 66.6666667%;
    float: left;
    background:pink;
    height: 40px;
}
.left{
    width: 66.6666667%;
    float: left;
    background: red;
    min-height: 100px;
    border-bottom: 1px solid gray;
}
.item{
    width: 100%;
    float: left;
    min-height: 100px;
    border-bottom: 1px solid gray;
}
.right{
    width: 33.333333%;
    float: right;
    background: blue;
    min-height: 100px;
    clear: right;
}