JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<ul>
    <li>
        <a href="#"><div class="first">first</div></a>
    </li>
    <li>
        <a href="#"><div class="second">second</div></a>
    </li>
</ul>

CSS

ul {
    list-style-type:none;
    background-color:#eee;
    height:30px;
}
ul li {
    display:inline-block;
    margin-right: 5px;
    height:30px;
}
div {
    height:30px;
    line-height:30px;
}
div.first {
    border-bottom-color: #aaa;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
div.second {
   border-top-color: #aaa;
    border-top-width: 2px;
    border-top-style: solid;
}
div.first:hover {
    border-bottom-width:30px;
}
div.second:hover {
    border-top-width:30px;    
}