JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<ul class="a">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Bananas</a></li>
    <li><a href="#">Lemons</a></li>
    <li><a href="#">Straberries</a></li>
</ul>

CSS

body {
    background-color: #808080;
    font-family: sans-serif; 
}

ul {
    list-style: none;
    margin: 2em 0;
    overflow: hidden;
    padding: 0;
}

li {
    display: block;
    float: left;
    font-size: 14px;
    line-height: 40px;
    
}

a { display: block; text-decoration: none;  color: white; padding: 0px 20px; }

/* option a */
.a li {
    background-size: 1px 100% ; background-repeat: no-repeat; background-position: 100% 0;
    background-image: -moz-linear-gradient(top, rgb(128,128,128) 0%, rgb(0,0,0) 50%, rgb(128,128,128) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(128,128,128)), color-stop(50%,rgb(0,0,0)), color-stop(100%,rgb(128,128,128)));
    background-image: -webkit-linear-gradient(top, rgb(128,128,128) 0%,rgb(0,0,0) 50%,rgb(128,128,128) 100%);
    background-image: -o-linear-gradient(top, rgb(128,128,128) 0%,rgb(0,0,0) 50%,rgb(128,128,128) 100%);
    background-image: -ms-linear-gradient(top, rgb(128,128,128) 0%,rgb(0,0,0) 50%,rgb(128,128,128) 100%);
    background-image: linear-gradient(top, rgb(128,128,128) 0%,rgb(0,0,0) 50%,rgb(128,128,128) 100%);
}

.a li:last-child { background: none; }

JavaScript

// http://forrst.com/posts/Can_we_get_this_effect_with_pure_CSS-IPi