JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- S O C I A L  I N C L U D E -->

        <div id="sticky-social">
            <ul>
                <a href="#" class="facebook" target="_blank" rel="external"><li class="fa fa-facebook"></li>
                    <span>
                        Facebook
                    </span>
                </a>
                <a href="#" class="twitter" target="_blank" rel="external"><li class="fa fa-twitter"></li>
                    <span>
                        Twitter
                    </span>
                </a>
                <a href="#" class="gplus" target="_blank" rel="external"><li class="fa fa-google-plus"></li>
                    <span>
                            Google+
                    </span>
                </a>
                <a href="#" class="linkedin" target="_blank" rel="external"><li class="fa fa-linkedin"></li>
                    <span>
                        LinkedIn
                    </span>
                </a>
            </ul>
        </div>

<!-- E N D  S O C I A L   I N C L U D E -->

CSS

#sticky-social ul {
  margin-left: 0;
  padding: 0;
}

#sticky-social {
  left: 0;
  position: fixed;
  top: 30%;
  z-index: 1;
}

#sticky-social a {
  background: #333;
  color: #fff!important;
  display: block;
  height: 45px;
  font-size: 20px;
  line-height: 45px;
  position: relative;
  text-align: center;
  width: 45px
}
#sticky-social .fa{margin-top:13px;}

#sticky-social>ul>a>span {
  line-height: 45px;
  left: -120px;
  position: absolute;
  text-align: center;
  width: 120px;
  -webkit-transition: left .3s;
  -moz-transition: left .3s;
  -o-transition: left .3s;
  transition: left .3s;
  z-index: -1;
  box-shadow:1px 1px 7px 3px rgba(7,7,33,.15);
  -webkit-box-shadow:1px 1px 7px 3px rgba(7,7,33,.15);
  -moz-box-shadow:1px 1px 7px 3px rgba(7,7,33,.15);
}

#sticky-social>ul>a:hover>span,
#sticky-social>ul>a:active>span,
#sticky-social>ul>a:visited>span,
#sticky-social>ul>a:focus>span {
  left: 25px;
  z-index: -1
}

#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span {
  background: #3b5998
}

#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span {
  background: #0084b4
}

#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span {
  background: #d34836
}

#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span {
  background: #007bb6
}