JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Link</a><br/>
<a href="#">Link</a>

CSS

a:after {
    content: '';
    height: 2px;
    margin: 0 auto;
    display: block;
    position: relative;
    background: #b8d5e5;
    opacity: 0;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}
a:hover:after {
    opacity: 1;
    transition: opacity .25s, -webkit-transform .25s;
    transition: opacity .25s, transform .25s;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

a {
    display:block;
    text-align:center;
}