JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="lang-bar">
    <a href="">
        <div>
            G<span>eo</span>
        </div>
    </a>
    <a href="">
        <div>
            E<span>ng</span>
        </div>
    </a>
    <div class="white"></div>
    <div class="stick"></div>
</div>

CSS

div.lang-bar {
    position: absolute;
    top: 30px;
    left: 50px;
    height: 84px;
    white-space: nowrap;
}
div.lang-bar a:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 42px;
    color: #001F4B;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
div.lang-bar a:nth-child(2){
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    height: 42px;
    color: #001F4B;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
div.lang-bar a span {
    display: inline-block;
    transform: translateX(20px);
}
div.lang-bar a div {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
div.lang-bar div.white {
    position: absolute;
    width: 100px;
    height: 100%;
    left: 20px;
    top:0;
    background: white;
    z-index: 3;
    pointer-events: none;
}
div.lang-bar div.stick {
    width: 10px;
    height: 1px;
    background: #84BEDE;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.5px;
    pointer-events: none;
}
div.lang-bar:hover a span {
    transform: translateX(0px);
}
div.lang-bar:hover div.white {
    transform: translateX(40px);
}