JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
	<div class="item item1"></div>
	<div class="item item2"></div>
	<div class="item item5"></div>
	<div class="item item3"></div>
	
	<div class="item item4"></div>

	<div class="item item6"></div>
	<div class="item item7"></div>
</div>

CSS

.clearfix::after {
    content:"";
    display: table;
    clear: both;
}

.container {
	width: 1920px ;
	font-size: 0;
}

.item {
    display: inline-block;
    vertical-align: top;
}

.item1 {
	 background-color: red;
    width: 480px;
    height: 390px;
}

.item2 {
	background-color: green;
    width: 480px;
    height: 390px;
}

.item3  {
	background-color: blue;
    width: 480px;
    height: 390px;
}
.item5  {
	background-color: yellow;
    width: 480px;
    height: 780px;
}

.item6  {
	  background-color: lightblue;
    width: 480px;
    height: 390px;
}

.item7 {
	  background-color: purple;
    width: 480px;
    height: 390px;
}