JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <div id="container">
        <div class="menu-item">
               <span class="menu-text">Find me on </span>
            <span class="menu-icon fa fa-facebook-official"></span>
        </div>
        <div class="menu-item">
            <span class="menu-text">Find me on </span>
            <span class="menu-icon fa fa-twitter-square"></span>
        </div>
        <div class="menu-item">
            <span class="menu-text">Find me on </span>
            <span class="menu-icon fa fa-google-plus-square"></span>
        </div>
    </div>

CSS

#container {
   height: 400px;
   width: 220px;
   background-color: rgba(128, 128, 128, 0.46);
   margin: 2% 2%;
   border: 1px solid #5970bb;
   border-radius: 3px;
   padding: 5px;
}
/*Before Hover*/
.menu-item {
    height: 1em;
    width: 87%;
    padding: 1.5em 1em 2em 1em;
    margin: 10% auto;
    background-color: rgba(128, 128, 128, 0.50);
    opacity: 0.4;
    -moz-transition: width 1s, border-radius 1s .2s, box-shadow 1s, opacity 1s 1.1s, background-color 1s 1.1s;
    -o-transition: width 1s, border-radius 1s .2s, box-shadow 1s, opacity 1s 1.1s, background-color 1s 1.1s;
    -webkit-transition: width 1s, border-radius 1s .2s, box-shadow 1s, opacity 1s 1.1s, background-color 1s 1.1s;
    transition: width 1s, border-radius 1s .2s, box-shadow 1s, opacity 1s 1.1s, background-color 1s 1.1s;
}

.menu-item:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both;
}

.menu-item .menu-icon {
   float: right;
   font-size: 2.5em;
   margin-top: -0.18em;
  -moz-transition: margin-right 1s, color 1s 1.5s;
  -o-transition: margin-right 1s, color 1s 1.5s;
  -webkit-transition: margin-right 1s, color 1s 1.5s;
   transition: margin-right 1s, color 1s 1.5s;
}

/*After Hover*/

.menu-item:hover {
   opacity: 1;
   width: 110%;
   background-color: rgba(71, 104, 234, 0.50);
   border-radius: 0 10% 10% 0 / 0 50% 50% 0;
   box-shadow: 2px 2.5px 2px 0 rgba(96, 96, 96, 0.46);
  -moz-transition: box-shadow 1s, width 1s, opacity 1s,  background-color 1s, border-radius 1s;
  -o-transition: box-shadow 1s, width 1s, opacity 1s,  background-color 1s, border-radius 1s;
  -webkit-transition: box-shadow 1s, width 1s, opacity 1s,  background-color 1s, border-radius 1s;
   transition: box-shadow 1s, width 1s, opacity 1s,  background-color 1s, border-radius 1s;
}


.menu-item:hover .menu-icon {
   color: #647beb;
   margin-right: 1em;
  -moz-transition: margin-right 1s, color 1s;
  -o-transition: margin-right 1s, color 1s;
  -webkit-transition: margin-right...