JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<section class="our-services">our services<div class="short-line"></div></section>
		<section class="tiles">
			<section class="row">
				<section class="tile tile-1 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/33865/guEeIOO2p_Y.jpg" alt="phone"></section>
				<section class="tile tile-2 col-xs-6 col-sm-3 col-md-2">mobile<br>apps<div class="short-line-tile"></div></section>
				<section class="tile tile-3 col-xs-6 col-sm-3 col-md-2">Brand<br>promotion</section>
				<section class="tile tile-4 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/3385e/23vKQ2gh5sU.jpg" alt="megaphone"></section>
				<section class="tile tile-5 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/3387a/-0kPGnFZ0MA.jpg" alt="www"></section>
				<section class="tile tile-6 col-xs-6 col-sm-3 col-md-2">Website<br>design &#38; coding<div class="short-line-tile"></div></section>
				<section class="tile tile-7 col-xs-6 col-sm-3 col-md-2">Graphics<br>design</section>
				<section class="tile tile-8 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/33857/Vya0hasSU6U.jpg" alt="brush"></section>
				<section class="tile tile-9 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/33873/k5xydLJ19ss.jpg" alt="pencil"></section>
				<section class="tile tile-10 col-xs-6 col-sm-3 col-md-2">Identity<br>creation<div class="short-line-tile"></div></section>
				<section class="tile tile-11 col-xs-6 col-sm-3 col-md-2">Motion<br>dynamics</section>
				<section class="tile tile-12 col-xs-6 col-sm-3 col-md-2"><img src="http://cs629104.vk.me/v629104102/3386c/VuyQaEO8dzU.jpg" alt="movie"></section>
			</section>
		</section>

CSS

@font-face {
    font-family: 'latoblack';
    src: url('../fonts/lato-black-webfont.eot');
    src: url('../fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-black-webfont.woff2') format('woff2'),
         url('../fonts/lato-black-webfont.woff') format('woff'),
         url('../fonts/lato-black-webfont.ttf') format('truetype'),
         url('../fonts/lato-black-webfont.svg#latoblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold-webfont.eot');
    src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato-bold-webfont.ttf') format('truetype'),
         url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular-webfont.eot');
    src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff'),
         url('../fonts/lato-regular-webfont.ttf') format('truetype'),
         url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: latoregular;
	overflow-x: hidden;
}

.row {
	margin-left: 0;
	margin-right: 0;
}

.container-fluid {
	padding: 0;
}

.fix::after {
    content:'';
    display:table;
    clear:both;
}

.logo-nav {
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 2%;
}

.logo {
	margin-left: 7%;
	float: left;
	position: relative;
	text-transform: uppercase;
}

.logo a {
	font-size: 30px;
	color: white;
	text-decoration: none;
}

.logo a span {
	font-family:...