JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<div class="bg">
			<div class="container clearfix">
				<a href="#"><img class="logo" src="img/logo.png" alt=""></a>
				<nav class="top-menu">
					<ul>
						<li><a href="#">home</a></li>
						<li><a href="#">services</a></li>
						<li><a href="#">features</a></li>
						<li><a href="#">portfolio</a></li>
						<li><a href="#">contact</a></li>
					</ul>
				</nav>
				
			</div>
		</div>
		<div class="container">
			<p class="header-text">“I’m looking for the unexpected.</p>
			<p class="header-text-2">I’m looking for things I’ve never seen before.”</p>
		</div>
	</header>
	<div class="services">
		<div class="container clearfix">
			<h3><span>Ser</span>vices</h3>
			<div class="services-item-1">
				<h2>coffe</h2>
				<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
			</div>
			<div class="services-item-2">
				<h2>instant</h2>
				<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
			</div>
			<div class="services-item-3">
				<h2>serious</h2>
				<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
			</div>
			<div class="services-item-4">
				<h2>frame</h2>
				<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
			</div>
		</div>
	</div>
	<div class="portfolio">
		<div class="container">
			<h2><span>por</span>tfolio</h2>
			<nav class="portfolio-nav">
				<ul>
					<li><a href="#">all</a></li>
					<li><a href="#">panoramas</a></li>
					<li><a href="#">portraits</a></li>
					<li><a href="#">macro</a></li>
					<li><a...

CSS

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {clear: both;}

.container {
	width: 960px;
	margin: 0 auto;
}

header {
	height: 750px;
	background: url(../img/header-bg.jpg)
}

.logo {
	padding-top: 35px;
	float: left;
}

.top-menu {
	padding-top: 35px;
	float: right;
}

.bg {
	background-color: rgba(67, 78, 85, .8);
	height: 100px;
}

.top-menu ul li {
	float: left;
	margin-right: 10px;
}

.top-menu ul li a {
	font: bold 14px 'Segoe UI', Tahoma;
	text-transform: uppercase;
	color: #fff;
	padding: 10px 18px;
}

.top-menu ul li a:hover {
	color: #4bcaff;
	border: 2px solid #4bcaff;
}

.header-text {
	font: 38px 'Segoe UI', Tahoma;
	text-transform: uppercase;
	text-align: center;
	width: 685px;
	margin-left: 135px;
	margin-top: 245px;
	color: #fff;
	opacity: .8;
	background-color: rgba(76, 87, 94, .7);
}

.header-text-2 {
	font: 38px 'Segoe UI', Tahoma;
	text-transform: uppercase;
	text-align: center;
	margin-top: 10px;
	color: #fff;
	opacity: .8;
	background: #4c575e;
	opacity: .8;
	background-color: rgba(76, 87, 94, .7);
}

.services {
	background: #4bcaff;
	height: 430px;
}

.services span {border-bottom: 2px solid #fff;}

.services h3 {
	font: 30px 'Segoe UI', Tahoma;
	color: #fff;
	text-transform: uppercase;
	padding-top: 85px;
	font-weight: lighter;
}

.services h2 {
	padding-top: 65px;
	font: 24px 'Segoe UI', Tahoma;
	color: #fff;
	text-transform: uppercase;
}

.services p {
	font: 12px 'Segoe UI', Tahoma;
	color: #fff;
	line-height: 1.5;
	padding-top: 15px;
}

.services-item-1,
.services-item-2,
.services-item-3,
.services-item-4 {
	width: 21%;
	margin-right: 38px;
	float: left;
	margin-top: 35px;
}

.services-item-1 {background: url(../img/coffe.png) no-repeat top left;}
.services-item-2 {background: url(../img/instant.png) no-repeat top left;}
.services-item-3 {background: url(../img/dslr.png) no-repeat top left;}
.services-item-4 {background: url(../img/frame.png) no-repeat top left;}

.portfolio {
	height:...