JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <ul>
        <li><a href="">Link 1</a>
        </li>
        <li><a href="">Link 2</a>
        </li>
        <li class="logo"><a href=""><img src="/favicon.png"/></a>
        </li>
        <li><a href="">Link 3</a>
        </li>
        <li><a href="">Link 4</a>
        </li>
    </ul>
</div>

CSS

*{
    padding: 0px;
    margin: 0px;
}
.nav{
	width: 650px;
	height: 87px;
	margin: auto;
	text-align: center;
}
.nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	list-style-image: none;
    height: 100px;
}
.nav ul li{
	float: left;
	margin: 0;
	padding: 0;
}

.nav ul li a{
	height: 87px;
	padding: 0 30px;
	line-height: 87px;
	display: inline-block;
	color: black;
	text-transform: uppercase;
	text-decoration: none;
}
ul li a:hover{
    background-color: red;
}
.logo {
    position: relative;
    top: -10px;
}
.logo a img{  
    height: 100px;
}