JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header"><div class="container">
<div class="row"><div class="col-lg-4 col-lg-push-1" id="a-btn">
<a href="../login/" class="a-btn"><span class="a-btn-slide-text">111111111</span></a>
<a href="../search/" class="a-btn"><span class="a-btn-slide-text">222222222</span></a>
<a href="../mail/" class="a-btn"><span class="a-btn-slide-text">333333333</span></a>
</div></div></div></header>
<div class="gray-block">
<div class="container"><div class="row"><div class="col-xs-6">&lt;111111111/&gt;</div>
</div></div></div>

CSS

body {background: #cecece;}

header#header {
    position: absolute;
    top: 5px;
    z-index: 1;
}


header .container {padding-top: 3px;}
.a-btn{
    background:#f1f1f1;
    padding:0px 0px 0px 0px;
    height:38px;
    width:38px;
    display:inline-block;
    position:relative;
    margin:1px;
    float:left;
    overflow:hidden;
    -webkit-transition:all 0.1s linear;
    -moz-transition:all 0.1s linear;
    -o-transition:all 0.1s linear;
    transition:all 0.1s linear;
}

.a-btn-slide-text{
    position:relative;
    top:38px;
    bottom:0px;
    height:auto;
    width:38px;
    left:0px;
    right:8px;
    writing-mode: vertical-rl;
    color:#000000;
    font-size:13px;
    font-family:Verdana;
    font-style:normal;
    text-indent:5px;
    overflow:hidden;
    -webkit-transition:height 0.2s linear;
    -moz-transition:height 0.2s linear;
    -o-transition:height 0.2s linear;
    transition:height 0.2s linear;
}

.a-btn:hover{
    background:#f1f1f1;
    height:120px;
}

.a-btn:hover .a-btn-slide-text{
    opacity: 1.0;
}

.a-btn:active{
    position:relative;
    top:3px;
}



/* end of header */


.gray-block {
    position:relative;
	margin-top: 57px;
}

.gray-block .container {
	background: #f5f5f5;
	padding: 10px 17px;
}