JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div id="nav">
    <ul>
        <li><a href="index.html">Menu 1</a></li>
        <li><a href="index.html">Menu 2</a></li>
        <li><a href="#"><img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="" class="logo" /></a></li>
        <li><a href="index.html">Menu 3</a></li>
        <li><a href="index.html">Menu 4</a></li>
    </ul>
</div>

CSS

/* NAV */
#nav {}
#nav > ul {    
    width: 100%;
    padding: 0;
    list-style: none;    
    font-size: 0;   
    text-align: center;
}
#nav > ul > li {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}
#nav > ul > li a {
    color: #e5e5e5;
    font-size: 40px;    
    display: block;
    text-decoration: none;
    font-family: freehand;
}
#nav > ul > li a:hover {
    color: #505050;
    text-decoration: underline;
}
#nav > ul > li:nth-of-type(3) {
    width: 30%;
}
#nav > ul > li .logo {
    max-width: 100%;
}