JSFiddle - React, Tailwind, and code Playground

by cornelas

HTML

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

CSS

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

#menu * {
    display: inline;
}

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
    border-left:1px solid rgba(255, 255, 255, 0);
    border-right:1px solid rgba(255, 255, 255, 0);
}

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

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

#menu li:hover {
    transition: border-color 0.5s ease;
    color:blue;
    border-left:1px solid rgba(255, 255, 255, 1);
    border-right:1px solid rgba(255, 255, 255, 1);

}