JSFiddle - React, Tailwind, and code Playground

by illight

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">33333333</span>
					</a>
      </div>
    </div>
  </div>
</header>





<?php

# INDEX PAGE BEGINS

if($isIndex):

?>

  <div class="gray-block">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <111111111/>
        </div>
      </div>
    </div>
  </div>

CSS

header#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: absolute;
  top: 38px;
  bottom: 0px;
  height: auto;
  width: 38px;
  left: 0px;
  right: 8px;
  writing-mode: tb-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 {
  margin-top: 57px;
}

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