JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<ul><li><a href="#">First</a></li><li><a href="#">Second</a></li><li><a href="#">Third</a></li><li><a href="#">Forth</a></li></ul>

CSS

ul{margin:0;padding:0;list-style:none;font-family:arial;background: linear-gradient(#ff670f ,#f1532f);width:auto;display:inline-block;width:300px;}
li{display:block;margin:0;color:#fff;position:relative;}
li:after{opacity:.5;
    content:'';left:0;bottom:1px;z-index:9;position:absolute;display:block;height:1px;background: linear-gradient(to right, #ff670f 0%,#ffd3d3 49%,#ff670f 100%);width:100%;
}
li a{color:#fff;display:block;text-decoration:none;padding:1em;}
li a:hover{background-color:rgba(255,255,255,0.1);}