JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="case-param">
<ul>
<li><a href="#A1" id="A1">bla</a></li>
<li><a href="#A2" id="A2">blub</a></li>
<li> <a href="#A3" id="A3">blaaa</a></li>
</ul>
  <div class="effect"></div>
</nav>

CSS

nav {
  margin-top: 30px;
  font-size: 15pt;
  background: #FFF;
  position: relative;
  height: 50px;
  display: block;
}

nav a {
  text-align: center;
  background: #FFF;
  display: block;
  padding: 13px 0;
  flex-basis: 33.33%;
  text-decoration: none;
  transition: .4s;
  color: red;
}
nav li {
      list-style: none;
    display: inline;
    /*font-family: 'Lato', sans-serif;*/
    font-size: 1.2vw;
    padding: 1.2vw;
    text-align: center;
}

.effect {
  position: absolute;
  left: 16.66%;
  transition: 0.4s ease-in-out;
  transform: translateX(-50%);
}

nav a:nth-child(1):target ~ .effect {
  left: 16.66%;
  /* the middle of the first <a> */
}

nav a:nth-child(2):target~ .effect {
  left: 49.99%;
  /* the middle of the second <a> */
}

nav a:nth-child(3):target ~ .effect {
  left: 83.33%;
  /* the middle of the third <a> */
}

.case-param .effect {
  width: 34px;
  height: 3px;
  bottom: 5px;
  background: blue;
}

/**/
.svg-param {
    fill:black;
    -webkit-filter: drop-shadow( 0px 1px 0px #fff );
}
#icoUpper {
    width:22px;
    margin: 0 auto;
    padding: 3px;
}
#icoNormal {
    width:21px;
    margin: 0 auto;
    padding: 3px;
}
#icoSmall {
    width:22px;
    margin: 0 auto;
    padding: 3px;
}
.icosCase{
    opacity: 0.4;
    transition: 0.2s ease;
}
.icosCase:hover{
    opacity: 0.8;
    transition: 0.2s ease;
}