JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="outer_before"></li>    
    <li class="outer_after"></li>
</ul>

CSS

html{height:100%;}
body {background:#000;height:100%;min-height:100%;padding:20px}
ul{height:100%;display:block}
li{float:left;margin-right:30px;}
.outer_before{display:block;width:50px;height:100%;padding:0 1px;

background: -webkit-linear-gradient(black 30%, rgba(41,184,229,1) 50%, black 70%) repeat-x;
    
    -webkit-transition: background-size 1s linear;
    background-position:0 50%;
    
cursor: pointer;

}

.outer_after{display:block;width:50px;height:100%;padding:0 1px;

background: -webkit-linear-gradient(black, rgba(41,184,229,1) 50%, black) repeat-x;
    
    cursor: pointer;}

.outer_before:hover{background-size:1px 285%;}