JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
	    <li>
            Item
	    </li>
	    <li>
            Menu
	    </li>
	    <li>
            Link
	    </li>
	    <li>
            Asdf
	    </li>
    </ul>
        <span></span>
</div>

CSS

#menu {
    background-color:gray;
    padding:5px;
}

#menu li {
    display: table-cell;
    width:1%;
    color:white;
    border:1px solid transparent;
    text-align:center;
    cursor:pointer;
}

#menu ul {
    padding-left:0px;
    margin:0px 100px;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

#menu li:hover {
    color:blue;
    border-left:1px solid black;
    border-right:1px solid black;
}