JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a></li>
    <li><a href="test.html">Link5</a></li>
  </ul>
</nav>

SCSS

nav{
  width:100%;
  height:5rem;
  background:red;
}
  
  ul
  {
  margin:0 auto;
    font-size:0;
    overflow: hidden;
  li {
   display:block;
   line-height:4.8rem;
    position:relative;
    float: left;
    
    >a{
      text-decoration:none;
      color:#FFF;
      font-family:"Verdana";
      padding:.1rem 1.5rem;
      font-size:1.3rem;
      display:block;
      overflow:hidden;
      position:relative;
      transition:300ms all;
      height:100%;
      margin:0;
      
      
      &::before,&::after{
        content:'';
        width:100%;
        position:absolute;
        left:0;
        transition:200ms all;
      }
      
      &::before{
        background:#FFF;
        height:.5rem;
        top:0;
        transform:translateY(-100%);
      }
      &::after{
        background:#000;
        height:.4rem;
        bottom:0;
        transform:translateY(100%);
      }
      
      
      
      
     
    }
    
    &::before{
      content:'';
      width:100%;
      height:100%;
      top:0;
      left:0;
      background:#CCC;
      position:absolute;
      opacity:0;
    }
    
    &:hover{
      
      >a{
        
        padding-top:0.6rem;
        padding-bottom:0.1rem;
        
        &::before,&::after{
          transform:translateY(0);
        }
      }
      
      &::before{
        opacity:0.3;
      }
    }
    
    }
  
  }