JSFiddle - React, Tailwind, and code Playground

HTML

<table style="margin-left: auto; margin-right: auto;" border="0" width="50%" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <nav class="flexnav">
                <ul class="flexul">
                    <li class="flexli"><a href="foo.html"><img class="fleximg" alt="" src="foo.png"><strong>About</strong>blah blah</a>

                    <li class="flexli"><a href="foo.html"><img class="fleximg" alt="" src="foo.png"><strong>Work</strong>woof woof</a>
                </ul>
            </nav>
        </tr>
    </tbody>
</table>

CSS

.flexnav {
    font:700 .65em/1.5 helvetica, arial, "nimbus sans l", sans-serif;
    position:relative;
    width:100%;
    height:100%;
    top:30pt;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
}
.flexul {
    width:580px;
    height:80px;
    display:-webkit-box;
    display:-moz-box;
    list-style:none;
    background: -webkit-linear-gradient(#fff, #e0e0cf);
    background:-moz-linear-gradient(#fff, #e0e0cf);
    -webkit-box-shadow:0 1px 2px #a6b7c1;
    box-shadow:0 1px 2px #a6b7c1;
    border-radius:8px;
}
.flexli {
    position:relative;
    margin:15px 0;
    padding-left:15px;
    border-right:1px solid rgba(160, 180, 190, .4);
    -webkit-box-flex:1;
    -webkit-transition:padding-left .4s ease-out;
    -moz-box-flex:1;
    -moz-transition:padding-left .4s ease-out;
}
.flexli:last-child {
    border:none;
}
.flexli:hover {
    padding-left:80px;
}
.flexli:hover .fleximg {
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
}
.fleximg {
    position:absolute;
    top:-5px;
    left:8px;
    opacity:0;
    -webkit-transform:scale(.5);
    -webkit-transition:all .4s ease-out;
    -moz-transform:scale(.5);
    -moz-transition:all .4s ease-out;
}
strong {
    display:block;
    font-size:1.3em;
    color:#111;
    padding-top:10px;
}