JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="col2 big"></div>
    <div class="col2 small"></div>
    <div class="col2 small"></div>
    <div class="col2 small lastCol"></div>
    <div class="col2 small"></div>
    <div class="col2 small"></div>
    <div class="col2 small lastCol"></div>
</div>

CSS

/*   A BASIC LAYOUT for a 1006px width container and 8 columns  */

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8   {
     float: left; 
    margin: 0 18px 0 0;  
}

.lastCol { margin-right: 0 !important; }
	
	
    .col1  { width: 110px; }
	.col2  { width: 238px; }
	.col3  { width: 366px; }
	.col4  { width: 494px; }
	.col5  { width: 622px; }
	.col6  { width: 750px; }
	.col7  { width: 878px; }
	.col8  { width: 1006px; margin: 0;}

.container { 
    margin: 0 auto; 
    padding: 0 0px; 
    width: 1006px; 
    text-align: left; 
    overflow:hidden;
    position:relative;
}

/*  --------------------------------- */
.big {
    background-color:blue;
    height:800px;
}
.small {
    background-color:blue;
    height:391px;
    margin-bottom:18px;
}