JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <div class = "inner-wrap">
            <div id = "logo">
                <h1>p</h1>
               <nav></nav>
            </div>
            <hgroup id = "tagline">
                <h2><strong>Meet Perth,</strong></h2>
                <h3>A stupidly simple, flat PSD. Oh yeah, it's <strong>free</strong> too!</h3>
            </hgroup>
            <img src = "images/iphone5.png" alt = "iphone5">
            <a href = "#" class = "button">Download</a>
        </div>
    </header>

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
}
header, #about, #portfolio, #contact {
	height: 650px;
	width: 100%;
}
header {
	background-color: #333;
}
div.inner-wrap > #logo {
	1background-color: red;
	width: 100%;
}
div.inner-wrap > #logo > nav {
	position: absolute;
	top: 0%;
	left: 90%;
	width: 50px;
	height: 50px;
	background-image: url(https://dl.dropboxusercontent.com/u/5372577/logo-nav.png);
    background-repeat: no-repeat;
}
.inner-wrap {
	margin: 0 auto;
	padding-top: 2%;
    position: relative;
    width: 82%;
}