JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item">
      <div class="menu__link-bg"></div>
      <a class="menu__link" href="#">Lorem ipsum</a>
    </li>
    <li class="menu__item">
      <div class="menu__link-bg"></div>
      <a class="menu__link" href="#">Laborum quos</a>
    </li>
    <li class="menu__item">
      <div class="menu__link-bg"></div>
      <a class="menu__link" href="#">Possimus officiis</a>
    </li>
  </ul>
</nav>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #5f91b0;
}

.menu {
  color: #3a5362;
  border-top: 4px solid transparent;
  border-bottom: 4px solid #4b83a6;
  background-color: #e1e1e1;
}

.menu__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  position: relative;
  margin-right: 0.5rem;
  perspective: 40px;
}

.menu__item:hover::after {
  transform: rotateX(-30deg);
  opacity: 1;
}

.menu__item:hover .menu__link-bg::before {
  transform: translateY(0%);
}

.menu__item:hover .menu__link {
  color: #e1e1e1;
}

.menu__link-bg {
  position: absolute;
  top: 2px;
  bottom: -8px;
  left: 5px;
  right: 5px;
  z-index: -1;
  overflow: hidden;
}

.menu__link-bg::before {
  content: '';
  display: block;
  height: 100%;
  background-image: linear-gradient(to bottom, #5f91b0 0%, #5f91b0 80%, #407393 100%);
  border-radius: 8px 8px 0 0;
  transform: translateY(100%);
  transition: transform 250ms ease-in;
}

.menu__item:last-child {
  margin-right: 0;
}

.menu__item::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -12px;
  width: 100%;
  height: 8px;
  background-color: #2a5671;
  transform: rotateX(-60deg);
  opacity: 0;
  transform-origin: center top;
  z-index: -2;
  transition: transform 250ms ease-in;
}

.menu__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  transition: color 250ms ease-in;
}