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:60px;
    font-size: 110%;
    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: 25%;
    text-decoration: none;
    color: #555;
    transition: .4s;
    color: #00ABE8;
}
/* ========================
    Lava-lamp-line:
   ======================== */
 .effect {
    position: absolute;
    left: 18%;
    transition: 0.4s ease-in-out;
}
nav a:nth-child(1):target ~ .effect {
    left: 18%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 43.5%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 68%;
    /* the middle of the third <a> */
}
nav a:nth-child(4):target ~ .effect {
    left: 93.5%;
    /* the middle of the forth <a> */
}
.ph-line-nav .effect {
    width: 55px;
    height: 2px;
    bottom: 5px;
    background: #00ABE8;
    margin-left:-75px;
}