JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<div class="container clearfix">
			<img src="img/logo.png" alt="">
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Contacts</a></li>
				</ul>
			</nav>
			<div class="descr">
				<p><em>good ideas</em><br> <b>comes</b></p>
				<span>first!</span>
			</div>
		</div>
	</header>
	<div class="services">
		<div class="container">
			<img src="img/logo.png" alt="">
			<nav class="red-nav ">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Contacts</a></li>
				</ul>
			</nav>
			<div class="services-descr">
				<h2>our services</h2>
				<p class="first-p">Cras commodo mattis justo nec <span>lobortis</span>. Nam ut tellus lobortis, ullamcorper massa sit amet</p>
				<p class="second-p">Cras suscipit porttitor porttitor. Morbi sit amet tincidunt sapien. Curabitur posuere lectus aliquet erat rutrum sollicitudin. In enim diam, ullamcorper quis libero et, ultricies commodo est. Quisque at ante vitae justo fermentum viverra ac eu justo. Ut luctus imperdiet lacus, eget laoreet erat posuere quis.</p>
			</div>
			<div class="services-item-wrap">
				<div class="services-item-1">
					<h4>researching</h4>
					<p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
				</div>
				<div class="services-item-2">
					<h4>design</h4>
					<p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
				</div>
				<div class="services-item-3">
					<h4>development</h4>
					<p>Praesent interdum blandit quam. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
				</div>
				<div...

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

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

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

.contact nav,
.our-work nav,
.team nav,
.services nav,
header nav {
	float: right;
	margin-top: 40px;
}

.contact img,
.our-work img,
.team img,
.services img,
header img {
	float: left;
	padding-top: 35px;
}

.contact nav li,
.our-work nav li,
.team nav li,
.services nav li,
header nav li {
	float: left;
	margin-right: 10px;

}

.contact nav li a,
.our-work nav li a,
.team nav li a,
.services nav li a,
header nav li a {
	font: 18px Tahoma, serif;
	color: #fff;
	padding: 40px 25px 17px;
	border-radius: 0 0 4px 4px;
}

header nav li a:hover {
	background: #74c7d5;
}

.services nav li a:hover {
	background: #df5c64;
}

.team nav li a:hover {
	background: #91778e;
}

.our-work nav li a:hover {
	background: #a1ca6c;
}

.contact nav li a:hover {
	background: #82c8bd;
}

.descr {
	width: 833px;
	height: 170px;
	margin: 0 auto;
	position: relative;
	top: 400px;
	background: rgba(255, 255, 255, .4);
	padding-left: 48px;
	padding-top: 13px;
}

.descr span {
	font: 138px Tahoma;
	text-transform: uppercase;
	color: #74c7d5;
	float: right;
	position: relative;
	top: -157px;
}

.descr em {
	text-transform: uppercase;
	font: 60px Tahoma;
	color: #74c7d5;
}

.descr b {
	padding-left: 180px;
}

.descr p {
	font: 60px Tahoma;
	color: #74c7d5;
}

.services {
	height: 1000px;
	background: #b24a50;
}

.red-nav ul {
	padding-bottom: 100px;
}

.services-descr {
	text-align: center;
	padding-top: 190px;
	color: #fff;
}

.services-descr h2 {
	text-transform: uppercase;
	font: 60px Tahoma, serif;
	padding-bottom: 40px;
}

.services-descr p.first-p {
	text-transform: uppercase;
	font: 20px Tahoma, serif;
	padding-bottom: 20px;
}

.services-descr p.second-p {
	color: #ffcccf;
	font:...