JSFiddle - React, Tailwind, and code Playground

by Neil Shuker

HTML

<body>
<div id="section2">
	<div class="container grid2">
		<article class="col half">MAP</article>
		<article class="col half" style="background-color:#069;">
			<div class="grid2">
        	    <article class="col quater">BOX 1</article>
        	    <article class="col quater">BOX 2</article>
         	</div>
			<div class="grid2">
	            <article class="col quater">BOX 3</article>
    	        <article class="col quater">BOX 4</article>
          	</div>
        </article>
        <br/>
	</div>
</div>
</body>

CSS

body {
        margin: 0;
        padding: 0;
}
#section1 br,#section2 br,#section3 br, #topbar br {
  clear: both;
}
.container {
	margin: auto;
    max-width: 1400px;
	overflow:hidden;
}

.col { 
	background: #eee;
	float: left;
	margin-left: 1.4%;
	margin-bottom: 20px;
}
.grid2 .col {
	width: 49.3%;
}
.grid2 .half {
	
	/*width: 48.4%;*/
	height:49.3vw;
	/*max-width:678px;*/
	max-height:690px;
	/*float:left;*/
	position:relative;
}
.grid2 .quater {
	margin-left: 2.1%;
	margin-bottom: 2.1%;
	width: 48.95%;
	height:48.95vw;
	/*max-width:317px;*/
	max-height:338px;
/*	float:left;*/
	position:relative;
}

.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}