JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<ul class="nav">
<li class="number1"><a href="#"><img class="logo" src="images/logo300075.png" alt="" /></a></li>
<li class="number2"><a href="#">Read</a></li>
<li class="number3"><a href="#">Read</a></li>
<li class="number4"><a href="#">Read</a></li>
<li class="number5"><a href="#">Read</a></li>
<li class="number6"><a href="#">Browse</a></li>
<li class="number7"><a href="#">Archives</a></li>
</ul>

CSS

.nav {display:table;
    width:600px;
    table-layout:fixed;
    border-collapse:collapse;
    padding:0;
}
.nav li {display:table-cell;
    border:1px solid;
    text-align:center;
    vertical-align:middle;
}
li.number7:hover {width:160px;}
.logo , .nav li.number1{
    height:1.2em;
    width:3em;}