JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

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: rgba(0,0,0,0.4);
    color:#ccc;
    left: 0;
    text-align: center;
    overflow: hidden;
    margin: 5px;
    -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

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

#menu-container div:hover span{
    color: #fff;
    background: #FF0000;
    height: 300px;
    margin: -27px 0 5px 0;
    padding: -5px 0 0 0;
}