JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div class="firstcontainer">
    <div class="firstitem"></div>
    <div class="seconditem"></div>
    <div class="thirditem"></div>
</div>
<div class="secondcontainer">
    <div class="subcontainer">
        <div class="fourthitem"></div>
        <div class="fifthitem"></div>
        <div class="sixthitem"></div>
    </div>
    <div class="seventhitem"></div>
</div>

CSS

.firstcontainer,
.secondcontainer{
    width:500px;
    height:200px;
    position:relative;
    margin:0 auto;
    margin-bottom:10px;
    background:#ebebeb;
}
.secondcontainer{
    height:300px;
    margin-bottom:0;
}

.firstitem{
    width:345px;
    height:200px;
    margin:0 5px 0 0;
    padding:0;
    position:relative;
    float:left;
    background:#666;
}
.seconditem,
.thirditem{
    width:145px;
    height:95px;
    margin:0 0 5px 5px;
    padding:0;
    position:relative;
    float:left;
    background:#666;
}
.thirditem{
    margin:5px 0 0 5px;
}
.subcontainer{
    height:300px;
    width:270px;
    margin:0 5px 0 0;
    padding:0;
    position:relative;
    float:left;
    background:#666;
}
.fourthitem,
.fifthitem{
    width:130px;
    height:130px;
    margin:0 5px 0 0;
    padding:0;
    position:relative;
    float:left;
    background:#999;
}
.fifthitem{
    margin:0 0 0 5px;
}
.sixthitem{
    width:270px;
    height:160px;
    margin:10px 0 0 0;
    padding:0;
    position:relative;
    float:left;
    background:#999;
}
.seventhitem{
    height:300px;
    width:220px;
    margin:0 0 0 5px;
    padding:0;
    position:relative;
    float:left;
    background:#666;
}