JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/a92f8b3ed092f7b1eeb5c92a473121e67836bef8/d3.min.js"></script>
<table class="nav-menu" cellspacing="0">
    <tr>
        <td class="nav-item nav-item-selected">menu 1</td>
        <td id="td0" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 2</td>
        <td id="td1" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 3</td>
        <td id="td2" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 4</td>
        <td id="td3" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
    </tr>
</table>

CSS

.nav-menu 
{
    width:400px;
    height:35px;
    background: transparent;
}
.nav-menu td
{
    visibility: hidden;
    width: 0 !important;
    
}

.nav-menu td div
{
    display: none;
}
.nav-menu .nav-item
{
    font: 1em/1.167em Helvetica,Arial,sans-serif!important;
    color: #5A81B3;
    padding-left: 4px;
    border: 0px;    
    border-right: solid #DFE9EF 1px;
    visibility: visible; 
 }
 .nav-item-selected,
 .nav-item:hover
 {    
      color: #5A81B3;
      background: url("../images/arrow-nav.gif") no-repeat scroll 8px 100% #DFE9EF; 
  }