JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<nav class="case-param">
  <a href="#A1" id="A1">
    <div id="icoUpper" class="icosCase" onclick="upperCase(),togOpaCas(this)">
      <svg class="svg-param" viewBox="0 0 26.1 13.2">
        <path d="M9.2 9.9H3.6l-1.2 3.3H0L5.1 0h2.6l5.1 13.2h-2.4L9.2 9.9zM4.4 7.8h4l-2-5.4-2 5.4zm18 2.1h-5.6l-1.2 3.3h-2.4L18.4 0H21l5.1 13.2h-2.4l-1.3-3.3zm-4.8-2.1h4l-2-5.4-2 5.4z" />
      </svg>
    </div>
  </a>
  <a href="#A2" id="A2">                    <div id="icoNormal" class="icosCase activeIco" onclick="normalCase(),togOpaCas(this)">
                        <svg class="svg-param" viewBox="0 0 21.7 13.5"><path d="M9.2 9.9H3.6l-1.2 3.3H0L5.1 0h2.6l5.1 13.2h-2.4L9.2 9.9zM4.4 7.8h4l-2-5.4-2 5.4zM16.5 8l2.3-.4c.5-.1.7-.3.7-.7 0-.8-.5-1.4-1.7-1.4-1.1 0-1.8.7-1.9 1.6l-2-.4c.2-1.6 1.6-3 3.8-3 2.8 0 3.9 1.6 3.9 3.4v4.5c0 .8.1 1.4.1 1.5h-2c0-.1-.1-.4-.1-1.2-.4.7-1.3 1.4-2.8 1.4-1.9 0-3.1-1.3-3.1-2.7.1-1.5 1.3-2.4 2.8-2.6zm3 1.4V9l-2.4.4c-.7.1-1.2.5-1.2 1.2 0 .6.5 1.2 1.3 1.2 1.3 0 2.3-.6 2.3-2.4z"/></svg>
                    </div>
                </a>
  <a href="#A3" id="A3">                    <div id="icoSmall" class="icosCase" onclick="smallCase(),togOpaCas(this)">
                        <svg class="svg-param" viewBox="0 0 23.1 13.2"><path d="M9.2 9.9H3.6l-1.2 3.3H0L5.1 0h2.6l5.1 13.2h-2.4L9.2 9.9zM4.4 7.8h4l-2-5.4-2 5.4zM20.3 10.6H16l-1 2.6h-1.8l4-10.2h2l4 10.2h-1.9l-1-2.6zM16.6 9h3.1l-1.6-4.2L16.6 9z"/></svg>
                    </div></a>
  <div class="effect"></div>
</nav>

CSS

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

nav a {
  text-align: center;
  background: #FFF;
  display: block;
  padding: 13px 0;
  flex-basis: 33.33%;
  text-decoration: none;
  transition: .4s;
  color: red;
}

.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;
}