JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<nav class="ph-line-nav">
    <a href="#News" id="News">AA</a>
    <a href="#Act" id="Act">AA</a>
    <a href="#Search" id="Search">AA</a>
    <div class="effect"></div>
</nav>

CSS

nav {
    margin-top:30px;
    font-size: 15pt;
    display: table;
    background: #FFF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    float: left;
    padding: 2% 0;
    width: 33.33%;
    text-decoration: none;
    transition: .4s;
    color: red;
}
/* ========================
    Lava-lamp-line:
   ======================== */
 .effect {
    position: absolute;
    left: 22.5%;
    transition: 0.4s ease-in-out;
}
nav a:nth-child(1):target ~ .effect {
    left: 22.5%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 56%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 90%;
    /* the middle of the third <a> */
}
.ph-line-nav .effect {
    width: 34px;
    height: 2px;
    bottom: 5px;
    background: blue;
    margin-left:-50px;
}