JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<nav>
        <img class="logo" src="http://www.weborgtechnologies.com/img/banner.png"/>
		<a href=""><h1>Home</h1></a>
		<a href=""><h1>Blog</h1></a>
		<a href=""><h1>About</h1></a>
		<a href=""><h1>Contact</h1></a>
	</nav>
</header>

CSS

nav h1{
    color:lightgray;
    font-size: 150%;
    border-left:2px solid whitesmoke;
    padding:15px;
    min-width:50px;
    padding-right:30px;
}
nav a{
    display:table-cell;
    width:20%;
    max-height:100px;
}
nav a h1:hover{
    color:lime;
}
nav{
    height:100px;
    background-color:#000000;
    box-shadow: 0px 0px 10px #000000;
    display:table-row;
}
header{
	background-color:black;
	background-position:-50px 0px;
	display:table;
	width:100%;
	max-height:100px;
}
header img.logo{
	background-size:contain;
	background-repeat:no-repeat;
	width:430px;
	display:table-cell;
}