JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<ul>
  <li>
    <a href="#">
      <i class="fas fa-home"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fas fa-shuttle-van"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fas fa-umbrella-beach"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fas fa-snowflake"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fas fa-smoking-ban"></i>
    </a>
  </li>
  <li class="highlight"></li>
</ul>

SCSS

ul {
  display: table;
  list-style: none;
  margin: 30px auto 0px auto;
  padding: 0;
  position:relative;
  z-index:0;

  li {
    display:inline-block;
    text-align: center;
    margin: 0px 10px;
    padding: 10px 0;
    width:50px;

    a {
      color: #fff;
      text-decoration: none;
      font-size: 22px;
    }
  }
}

.highlight {
  background: transparent;
  position: absolute;
  left: calc(var(--p,0%));
  top: 0px;
  bottom:0px;
  width:50px;
  transition: 0s 9999s;
  z-index: -1;
  border-radius: 4px;
  color: #000;
}
li:hover ~ .highlight  {
  transition: .3s cubic-bezier(.8, .5, .2, 1.4); 
}
li:nth-child(1):hover ~ .highlight {
  background:#079992;
  --p:0.1%;
}
li:nth-child(2):hover ~ .highlight {
  background:#ff7f50;
  --p:20%;
}
li:nth-child(3):hover ~ .highlight {
  background:#3c6382;
  --p:40%;
}
li:nth-child(4):hover ~ .highlight {
  background:#60a3bc;
  --p:60%;
}
li:nth-child(5):hover ~ .highlight {
  background:#2ed573;
  --p:80%;
}

body  {
  background:#000;
}