JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<div class="container">
			<div class="logo">															<a href="#"><img src="img/logo.png" alt=""></a>
			</div>
			<nav class="top-menu">
				<ul class="clearfix">
					<li><a href="#">home</a></li>
					<li><a href="#">portfolio</a></li>
					<li><a href="#">blog</a></li>
					<li><a href="#">pages</a></li>
					<li><a href="#">features</a></li>
					<li><a href="#">contact</a></li>
				</ul>
				<div class="top-social">
						<a href="#" class="icon-rss"></a>
						<a href="#" class="icon-fb"></a>
						<a href="#" class="icon-tw"></a>
					</div>
			</nav>	
		</div>
	</header>
	<div class="content">
		<div class="container">
			<h1>We design &amp; build responsive themes</h1>
			<h2>Maecenas sed diam varius blandit magna. Duis mollis commodo luctus.</h2>
			<img class="slider" src="img/slider.jpg"  alt="">
			<h3>Interface Design is Important for Us</h3>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
			<div class="buttons-wrap clearfix">
				<div class="but">
					<a class="button-1" href="#">&nbsp;</a>
					<p>Interface Design</p>
				</div>
				<div class="but">
					<a class="button-2" href="#">&nbsp;</a>
					<p>Motion Graphic</p>
				</div>
				<div class="but">
					<a class="button-3" href="#">&nbsp;</a>
					<p>Photography</p>
				</div>
				<div class="but">
					<a class="button-4" href="#">&nbsp;</a>
					<p>Illustration</p>
				</div>
			</div>
			<div class="border"></div>
		</div>
	</div>
	<div class="our-works">
		<div class="container clearfix">
			<h3>our awesome works</h3>
			<div class="descr">
				<img src="img/work.jpg" alt="">
				<h4>Nobis Business Card</h4>
				<h5>Business Card, Graphic</h5>
				<p>Sed posuere consectetur est at lobortis. Porta sagittis lacus vel augue laoreet rutrum.</p>
			</div>
			<div...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
} 

html {height: 100%;}

body {
	height: 100%;
	font: 14/18px 'Times New Roman';
	background-color: #fff;
}

ul {list-style: none;}

* {
	margin: 0;
	padding: 0;
	outline: none;
}

a, a:hover {text-decoration: none;}

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

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

.logo {
	padding-bottom: 40px;
	padding-top: 40px;
}

.top-menu ul {
	width: 950px;
	outline: 1px solid #ccc;
	background: #393939;
}

.top-menu ul li {
	float: left;
}

.top-menu ul li a {
	display: block;
	padding: 19px 34px;
	background: #393939;
	color: #d0d0d0;
	text-transform: uppercase;
	font: bold 13px Tahoma, serif;
	border-right: 1px solid #464646;
}

.top-menu ul li a:hover {
	color: #fff;
	background: #302f2f;
}

.top-social {
	margin-top: -35px;
	margin-right: 15px;
	float: right;
}

.top-social a {
	margin-right: 3px;
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../img/social-sprite.png);
}

.top-social a.icon-rss {
	background-position: 0 0;
}

.top-social a.icon-rss:hover {
	background-position: 0 -15px;
}

.top-social a.icon-fb {
	background-position: 30px 0;
}

.top-social a.icon-fb:hover {
	background-position: 30px -15px;
}

.top-social a.icon-tw {
	background-position: 15px 0;
}

.top-social a.icon-tw:hover {
	background-position: 15px -15px;
}

.content h1 {
	padding-top:...