JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li><a href="content1.html"> Demo 1     </a></li>
        <li><a href="content2.html"> Demo 2     </a></li>
        <li><a href="content3.html"> Demo 3     </a></li>
        <li><a href="content4.html"> Demo 4     </a></li>
        <li><a href="content5.html"> Demo 5     </a></li>
        <li><a href="content6.html"> Demo 6     </a></li>
    </ul>

CSS

html { background: #535353; }

ul {
  display: block;
  list-style-type: none;
  padding: 5px;
  margin: 0;
}
ul li {
  display: block;
  margin: 0px 5px;
  margin-left: -13px;
    list-style: none; }

ul li a    {
    display:block;
    width:60px;
    background:#bea637;
    height: 25px;
    left: 10px;
    position: relative;
    top: 0px;
transition:             width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -moz-transition:    width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -ms-transition:     width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -o-transition:      width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -webkit-transition: width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
}

ul li a:hover  {
    width:250px;
    height:25px;
    left: 0px;
    top: 0px;
    background-color: #000;
    z-index: 1000;
    overflow: visible;
}