JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<div id='box'>
    <a href=''>Home</a>
    <a href=''>About</a>
    <a href=''>Portfolio</a>
    <a href=''>Contact</a>
</div>

CSS

#box {
    margin: 10px;
}
#box a {
   display: inline-block;
   width: 60px;
   background: #000;
   margin: 0px;
   padding: 3px 10px;
   color: #fff;
   text-align: left;
   text-decoration: none;
   -webkit-transition: padding-bottom 250ms ease-in-out;
}
#box a:hover {
 padding-bottom: 20px; 
}