JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu_1">
          <ul class="menu_cont">
              <li class="menu-left"><a href="#">Grammar</a></li>
              <li class="menu"><a href="#">Reading</a></li>
              <li class="menu"><a href="#">Listening</a></li>
              <li class="menu"><a href="#">Writing</a></li>
              <li class="menu"><a href="#">Speaking</a></li>
              <li class="menu"><a href="#">Vocabulary</a></li>
              <li class="menu-right"><a href="#">Fun</a></li>
          </ul>
 </div>

CSS

.menu_1{
    padding-top: 60px;
 }
menu_cont{
    widht:700px;
}

.menu-left,.menu,.menu-right{
    float:left;
    background-color:#6B6B6B;
    display:block;
width:100px;
    text-align:center;
}

.menu-left a,.menu a,.menu-right a{
    padding:20px;
    text-decoration:none;
    color:#fff;
    display:block;
}

.menu-left a:hover,.menu a:hover,.menu-right a:hover{
    background-color:#474747;
    box-shadow: 0 0 8px rgba(140, 140, 140, 0.4) inset;
}
.menu-left,.menu-left a{
    border-radius:5px 0 0 5px;
}

.menu,.menu-left{
    border-right:1px solid #424242;
}

.menu-right,.menu-right a{
    border-radius:0 5px 5px 0;
}