JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="navbar">
        <div class="navbar-special">
            <ul class="nav">
<li class="home"><a href="#"><img src="http://i.imgur.com/GryNQfZ.png" /></a></li>
<li class="search"><a href="#"><img src="http://i.imgur.com/NfURGQL.png" /></a></li>
<li class="logo"><a href="#"><img src="http://i.imgur.com/sIwbaop.png" /></a></li>
<li class="partner"><a href="#"><img src="http://i.imgur.com/Ry9hIzC.png" /></a></li>
        </div> <!-- div closing navbar -->
    </div><!-- div closing navbar -->
</body>

CSS

.navbar {
max-width:960px;
text-align:center;
}

.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;