JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" title="Browse Happy" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" title="Chrome Frame" target="_blank">activate Google Chrome Frame</a> to improve your experience for this website.</p>
<![endif]-->

<header>
	<div class="logo">
		<a href="#" title="All Star Plumbing and Heating"><img src="img/250-logo.png" alt="All Star Plumbing and Heating" /></a>
	</div>
	<div class="headContact">
		<p>07799 004 534</p>
	</div>
</header>	

<nav>
	<ul>
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="#" title="About">About</a></li>
		<li><a href="#" title="Services">Services</a></li>
		<li><a href="#" title="Gallery">Gallery</a></li>
		<li><a href="#" title="Contact">Contact</a></li>
	</ul>
</nav>

<section class="intro">
	<h1>Plumbing and Heating</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit quam ut urna laoreet ultricies. Pellentesque accumsan quam nisi, vel pulvinar diam tincidunt vel. Quisque at tincidunt sapien. Aenean interdum egestas sem quis lacinia. Duis eget sem eget quam eleifend varius. Nunc euismod lobortis lobortis.</p>

	<p class="button">
		<a href="#" title="Learn more...">Learn more...</a>
	</p>
</section>

<section class="contentContainer">
	<div class="homeHighlights">
		<img src="img/home-ideas.png" alt="Innovative Ideas" />
		<h2>Innovative Solution</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit quam.</p>
		<p class="buttonHigh">
			<a href="#" title="Learn more...">Learn more...</a>
		</p>
	</div>

	<div class="homeHighlights">
		<img src="img/home-quotes.png" alt="No Hassle Quotes" />
		<h2>No Hassle Quotes</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit quam.</p>
		<p class="buttonHigh">
			<a href="#" title="Learn...

CSS

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                            AUTHOR: Web dLite */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@import url(http://fonts.googleapis.com/css?family=Raleway:300);

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Raleway', sans-serif;
	font-size: 0.750em;
	color: #333333;
}

header, nav, section, footer {
	width: 100%;
}

footer {
	background: #ecf0f5;
}

nav {
	background: #16a085;
}

a {
	color: #16a085;
	text-decoration: none;
}

a:hover, a:active {
	color: #1abc9c;
}

.logo {
	margin: 0 auto;
	margin-top: 1%;
	width: 250px;
}

.headContact {
	display: none;
}

nav ul {
	list-style: none;
}

nav ul li a {
	display: block;
	width: 100%;
	margin: 2% 0;
	padding: 2% 0;
	color: #fff;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

nav ul li a:hover, nav ul li a:active {
	background: #1abc9c;
	color: #fff;
}

section.intro {
	width: 94%;
	margin: 5% 0%;
	background: #ecf0f5;
	padding: 3%;
}

section.intro h1 {
	font-size: 1.500em;
	margin-bottom: 4%;
	text-transform: uppercase;
}

p.button {
	text-align: center;
}

p.button a, p.buttonHigh a {
	width: 25%;
	margin: 3% 0;
	padding: 3%;
	display: block;
	color: #ecf0f5;
	background: #16a085;
	text-decoration: none;
}

p.button a:hover, p.button a:active, p.buttonHigh a:hover, p.buttonHigh a:active {
	background: #1abc9c;
}

.homeHighlights {
	margin: 4% auto;
	width: 74%;
	padding: 3%;
	background: #ecf0f5;
	text-align: center;
}

.homeHighlights h2 {
	margin: 4% auto;
	width: 70%;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;;
}

.homeHighlights img {
	margin: 0 auto;
	width: 80px;
}

p.buttonHigh a {
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

.footContainer {
	padding: 3%;
}

p.copyright, p.webdesign {
	margin-top: 3%;
}

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
	background:...