JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav"><!-- Комментарии убирают лишние отступы в inline-block.
    --><div><!--
        --><a data-menuanchor="ello" href="#ello">Ссылка 1.1</a><!--
        --><a data-menuanchor="ello" href="#ello">Ссылка 1.2</a><!--
        --><a data-menuanchor="ello" href="#ello">Ссылка 1.3</a><!--
    --></div><!--
    --><div><!--
        --><a data-menuanchor="ello" href="#ello">Ссылка 2.1</a><!--
        --><a data-menuanchor="ello" href="#ello">Ссылка 2.2</a><!--
    --></div><!--
    --><a data-menuanchor="ello" href="#ello">Ссылка 3</a><!--
    --><a data-menuanchor="ello" href="#ello">Ссылка 4</a><!--
--></nav>

CSS

nav {
  position: fixed; 
  z-index: 1;
 }
 nav div {
   display: inline-flex; 
   flex-direction: column;
 }
 nav a {
   display: inline-block; 
   margin: 0px; 
   padding: 5px;
   background: Navy; 
   border-radius: 10px; 
   text-align: center; 
   font-size: 15px; 
   color: White; 
   text-decoration: none;
 }
nav div a:nth-child(n+2) {
  position: relative;
 }
nav div a:nth-child(1) {
  z-index: 5;
 }
nav div a:nth-child(2) {
  z-index: 4; 
  transform: translateY(-100%); 
  transition: transform 2.0s;
}
nav div a:nth-child(3) {
  z-index: 3; 
  transform: translateY(-200%); 
  transition: transform 1.5s;
}
nav div a:nth-child(4) {
  z-index: 2; 
  transform: translateY(-300%); 
  transition: transform 1.0s;
}
nav div a:nth-child(5) {
  z-index: 1; 
  transform: translateY(-400%); 
  transition: transform 0.5s;
}
nav > div:hover > a:nth-child(n+2) {
  transform: translateY(0);
}
nav div:hover a:nth-child(2) {
  transition: transform 0.5s;
}
nav div:hover a:nth-child(3) {
  transition: transform 1.0s;
}
nav div:hover a:nth-child(4) {
  transition: transform 1.5s;
}
nav div:hover a:nth-child(5) {
  transition: transform 2.0s;
}
nav a:hover {
  background: OrangeRed;
}
nav a:active, nav a.active {
  background: Red;
}