JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<div class="container">
    <a href="#"> Container </a>
</div>

CSS

*{
    background-color: #000;
    text-align: center;
    padding-top: 40px;
}
a{
    text-transform: uppercase;
    text-decoration: none;
   display: inline-block;
    line-height: 2em;
    font-weight: 100;
    text-align: center;
    letter-spacing: 4px;
    color: #fff;
    position: relative;
    outline: none !important;
    transition: color 0.2s ease-out;
    background: transparent;
}
a:after{
    background: #fff85f;
    content: "";
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(7px);
    transition: transform .1s cubic-bezier(0.55,.085,.68,.53),opacity .1s cubic-bezier(0.55,.085,.68,.53);
}
a:hover{
    color: #fff;
    transition: color 0.2s linear;
}
a:hover:after{
    opacity: 1;
    transition: transform .2s cubic-bezier(0.25,.46,.45,.94),opacity 0s linear;
    transition-delay: 0s;'
    background: #fff85f;
}