JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<a class="nav" href="#">My blog</a>

CSS

.nav {
    display:inline-block;
    padding:5px 10px;
    font: 14px/1.2 serif;
    text-transform: uppercase;
    text-decoration: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 95%;
}

.nav:hover { 
            background-image: -webkit-linear-gradient(0, #fff 0%, #444 50%, #fff 100%);
}