JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="wrapper">
            <div class="v1g1"></div>
            <div class="v2g1"></div>
            <div class="v1g1"></div>
            <div class="v1g1"></div>
            <div class="v1g1"></div>
            <div class="v1g1"></div>
            <div class="v1g1"></div> 
        </div>
    </div>

CSS

.container{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
    background: #f00;
}
.wrapper{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.wrapper > div{
    float: left;
    border: 1px solid  #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #000;
    margin: 0 10px 10px 0;
}
.v1g1{
    width: 390px;
    height: 390px;
}
.v2g1{
    width: 390px;
    height: 790px;
}
.v3g1{
    width: 390px;
    height: 1190px;
}
.v1g2{
    width: 790px;
    height: 390px;
}
.v2g2{
    width: 790px;
    height: 790px;
}
.v3g2{
    width: 790px;
    height: 1190px;
}
.v1g3{
    width: 1190px;
    height: 390px;
}
.v2g3{
    width: 1190px;
    height: 790px;
}
.v3g3{
    width: 1190px;
    height: 1190px;
}