JSFiddle - React, Tailwind, and code Playground

by Christopher O

HTML

<div id="menu-container">
   <div class="menu1">
       <span>
           A<br>A
       </span>
    </div>
   <div class="menu2">
       <span>
           B<br>B
       </span>
    </div>
    <div class="menu3">
       <span>
           C<br>C
       </span>
    </div>
</div>

CSS

#menu-container div{
    height: 30px;
    width: 30px;
    border:1px solid #999;
    background-color:#222;
    color:#ccc;
    left: 0;
    text-align: center;
    overflow: hidden;
    margin: 5px;
}

#menu-container div span{
    display: block;
    line-height: 28px;
    font-size: 16px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#menu-container div:hover span{
    color: #fff;
    margin: -28px 0 0 0;
}