JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<div id="wrapper">
   		<h1>Premier Webster</h1>
        <h5>Local Web Design For The Profesional In You</h5>
        <a href="http://google.com/"><div class="smile"></div></a>
    </div>	
</div>

CSS

#header {
	background-color:#473D39;
	height:100%;
	width:100%;
	display:table;
	position:absolute;
	z-index:10;
}

#wrapper {
	display:table-cell;
	vertical-align:middle;
}

#header h1 {
	text-align:center;
	margin:0px;
	font-size:80px;
	padding-top:5%;
	font-weight:normal;
	color:#FFF;
	letter-spacing:18px;
	text-transform:uppercase;
}

#header h5 {
	text-align:center;
	color:#FFF;
	margin:15px 15px 50px;
	font-weight:normal;
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:2px;
}

div.smile {
    background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
    background-size: 60px 60px;
    height: 60px;
    width: 60px;
    cursor: pointer;
}

div.smile:hover {
    background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
    transition: ease 0.5s;
}