JSFiddle - React, Tailwind, and code Playground

HTML

<header>

<img src="img/logo_big.png"/>

<button class="menu">
    <a href="#menu">&#9776;</a>
    </button>
    
    <nav style="display:none;">
		<a href=""><p>HOME / GEDANE ZAKEN</p></a>
		<a href=""><p>CONTACT</p></a>
    </nav>
    
</header>

<div class="spacer"></div>

<center>
<div class="gridcontainer">

<div class="section group">
	<div class="col span_2_of_2">
	<img src="img/img1.png"/>
    </div>
</div>

<div class="section group">
	<div class="col span_1_of_2">
	<img src="img/img1.png"/>
	</div>
	<div class="col span_1_of_2">
	<img src="img/img1.png"/>
	</div>
</div>

<div class="section group">
	<div class="col span_2_of_3">
	<img src="img/img1.png"/>
	</div>
</div>

<div class="section group">
	<div class="col span_2_of_3">
	<img src="img/img1.png"/>
	</div>
</div>

<div class="section group">
	<div class="col span_1_of_2">
	<img src="img/img1.png"/>
	</div>
	<div class="col span_1_of_2">
	<img src="img/img1.png"/>
	</div>
</div>

<div class="section group">
	<div class="col span_2_of_2">
	<img src="img/img1.png"/>
    </div>
</div>

</div>
</center>

CSS

@charset "UTF-8";
/* CSS Document */

body, html { 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	border: none;
	left: 0;
	top: 0;
	width: 100%;
}

body {
	background: #f6cb4a; /* Old browsers */
	background: -moz-linear-gradient(top, #ebe7e7 0%, #f3f2f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebe7e7), color-stop(100%,#f3f2f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Opera 11.10+ */
 	background: -ms-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* IE10+ */
  	background: linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* W3C */
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe7e7', endColorstr='#f3f2f2',GradientType=0 ); /* IE6-9 */
  	height: 100%;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	width: 100%;
  	background-position: 0px 0px;
}

header {
    width: 100vw;
    height: 65px;
    background: white;
    position: fixed; 
	z-index: 9999;
	top: 0px;
}

header img {
	width: 85px;
	margin-left: 40px;
	margin-top: 3px;
}

.spacer {
	height: 80px;
	width: 100vw;
}

button { 
	position: absolute; 
	right: 10vw; 
	border: none; 
	margin: 0; 
	padding: 0; 
	background: none; 
}

button a { 
	font-size: 4em; 
	text-decoration: none; 
	color: grey; 
}

nav {
	position: fixed;
	top: 65px;
}

nav p {
	width: 100vw;
	padding: 25px 0px 25px 0px;
	background: white;
	margin: 0px;
	border-top: 1px solid #ededed;
	transition: 0.3s;
	}
	
nav p:hover {
	background: #ededed;
}
	
nav a {
	text-align: center;
	text-decoration: none;
	color: #333;
}

.gridcontainer {
	width: 95vw;
	}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.5%;
	background: green;
}
.col:first-child { margin-left: 0; }

/*  GROUPING ...