JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div id="menu">
    <div class="buttons" id="b1"><span>PHONES</span></div>
    <div class="buttons" id="b2"><span>OFFER</span></div>
    <div class="buttons" id="b3"><span>INETRNET</span></div>
    <div class="buttons" id="b4"><span>HELP</span></div>
    <div class="buttons" id="b5"><span>CONTACT</span></div>
</div>

CSS

#menu {
    width: 500px;
    height: 40px;
}
.buttons {
    width: 100px;
    height: 40px;
    float: left;
    text-align: center;
    color: #FFF;
    font-family: Verdana;
    font-size: 16px;
    overflow: hidden;
}
.buttons > span {
    display: block;
    position: relative;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding-top: 11px;
    background-color: #538;
    transition: 320ms 100ms ease-in-out;
}
.buttons > span:after {
    display: block;
    position: absolute;
    top: 40px;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding-top: 11px;
    background-color: #74B;
    transition: 320ms 100ms ease-out;
}
.buttons > span:hover {
    transform: translateY(-100%);
    background-color: #74B;
    transition: 320ms ease-out;
}
.buttons > span:hover:after {
    color: #538;
    background-color: #FFF;
    transition: 320ms ease-out;
}
#b1 > span:after{ content: 'PHONES';}
#b2 > span:after{ content: 'OFFER';}
#b3 > span:after{ content: 'INETRNET';}
#b4 > span:after{ content: 'HELP';}
#b5 > span:after{ content: 'CONTACT';}