JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cuda Single Page</title>
	<link rel="stylesheet" href="styles/style.css">
	<link href="http://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
</head>
<body class="page">
	<div class="welcome">
		<div class="size-box">
			<div class="welcome__top">
				<div class="top__logo">
					<a href="#" class="logo"><img src="images/logo.png" alt="Cuba"></a>
				</div>
				<div class="top__nav">
					<a href="#" class="nav">home</a>
					<a href="#" class="nav">about</a>
					<a href="#" class="nav">work</a>
					<a href="#" class="nav">blog</a>
					<a href="#" class="nav">contact</a>
				</div>
			</div>
			<div class="welcome__header">
				<p class="header">Hi there! We are the new kids on the block <br>and we build awesome websites and mobile apps.</p>
			</div>
			<div class="welcome__button">
				<a href="#" class="button">work with us!</a>
			</div>
		</div>
	</div>
	<div class="services">
		<div class="size-box">
			<p class="header__top">services  we provide</p>
			<hr class="hr">
			<p class="subtext">We are working with both individuals and businesses from all over the globe <br>to create awesome websites and applictions.</p>
			<div class="content">
				<div class="content__block">
					<img class="icon" src="images/flag.png" alt="flag">
					<p class="icon__text">branding</p>
					<p class="icon__subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed diam nonummy nibh.</p>
				</div>
				<div class="content__block">
					<img class="icon" src="images/crayon.png" alt="crayon">
					<p class="icon__text">design</p>
					<p class="icon__subtext">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
				</div>
				<div class="content__block">
					<img class="icon" src="images/gears.png" alt="gears">
					<p class="icon__text">development</p>
					<p class="icon__subtext">At vero eos et accusamus et iusto odio dignissimos qui...

CSS

.page {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: "Titillium Web";
	color: #fff;
	font-size: 16px;
}

.welcome {
	background-color: #87509c;
}

.size-box {
	width: 1100px;
	margin: 0 auto;
}

.welcome__top {
	padding-top: 57px;
}

.top__logo {
	float: left;
	display: inline-block;
}

.top__nav {
	float: right;
	padding-top: 13px;
}

.nav {
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	padding: 5px 22px;
}

.nav:hover {
	background-color: #643a79;
	border-radius: 3px;
}

.welcome__header {
	padding-top: 145px;
	text-align: center;
}

.header {
	font-weight: 700;
	font-size: 42px;
	margin: 0;
}

.welcome__button {
	padding-top: 62px;
	padding-bottom: 145px;
}

.button {
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	border-radius: 3px;
	background-color: #eb7d4b;
	width: 293px;
	display: block;
	text-align: center;
	padding: 14px 0;
	margin: 0 auto;
	box-shadow: 0 4px 0 #c86a40;
}

.services {
	background-color: #17c2a4;
}

.header__top {
	padding-top: 120px;
	text-align: center;
	display: block;
	font-size: 40px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

.hr {
	width: 87px;
	height: 4px;
	background-color: #14a58c;
	border: 0;
	margin: 22px auto;
}

.subtext {
	display: block;
	text-align: center;
	font-weight: 400;
	font-size: 18px;
	margin: 0;
}

.content {
	padding-top: 82px;
	margin: 0 auto;
}

.content__block {
	width: 260px;
	float: left;
	display: inline-block;
	text-align: center;
}

.icon {
	display: block;
	margin: 0 auto;
}

.icon__text {
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 600;
	margin: 0;
}

.icon__subtext {
	font-weight: 300;
}