JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header" class="main-header">
		<h1 class="name"><a href="#">LOGO</a></h1>
		<ul class="main-nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">Features</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</header> 

	<div class="banner">
		<h1 class="headline">HAHA</h1>
		<span class="tagline">BETHCA!</span>
	</div><!--/.banner-->
	

	<h2>Features</h2>
	<div class="row">		
			<div class="item-1 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.primary-->
		
		<div class="item-2 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.secondary-->
		
		<div class="item-3 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.tertiary-->	

		<div class="item-4 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.tertiary-->	


		<div class="item-5 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.tertiary-->	

		<div class="item-6 col">
			<img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
		</div><!--/.tertiary-->	



	</div>

CSS

.name {
	font-size: 1.35em;
	margin: 0;
}

.main-nav {
	margin-top: 5px;
}
.name a,
.main-nav a {
	text-align: center;
	display: block;
	padding: 10px 15px;
	color: #fff;
}
.main-nav a {
	font-size: 1em;
	text-transform: uppercase;
}
.main-nav a:hover {
	color: #18bc9c;
}


/* ---- Layout Containers ---- */

.main-header {
	padding: 1em 0.7em;


}
.banner,
.main-footer {
	text-align: center;
}
.banner {
	color: #fff;
	background-color: #18bc9c;
	padding: 6.5em 0;
	margin-bottom: 32px;
}
.col {
	padding: 0 1em;

}
.main-footer {
	background: #d9e4ea;
	padding: 2em 0;
	margin-top: 30px;
}


#header{
  width: 100%;
	background-color: #34495e;
}

/* ---- Page Elements ---- */

.logo {
	width: 256px;
}
.headline,.tagline {
	margin: 0;
	color: #fff;
}
.feat-img {
	border-radius: 5px;
}



/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
	.main-header,
	.row,
  .footer-inner{
		width: 80%;
		margin: 0 auto;
	}
	.tagline {
		font-size: 1.4em;
	}
}


/* ================================= 
  Base Styles
==================================== */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.row {
	flex: 1;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

	.main-header,
	.main-nav,
	.row {
		display: flex;
	}

	.main-header {
		flex-direction: column;
		align-items: center;
	}

	.col {
		flex: 1 50%;
	}

	.row {
		flex-wrap: wrap;
	}


	.item-2 {
		order: -1;
	}

}

@media (min-width: 1025px) {

	.main-header {
		flex-direction: row;
		justify-content: space-between;
	}

	.col {
		flex-basis: 0;
	}

	.item-1 {
		flex-grow: 1.4;
	}

}