JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<ul id="socialnetworks">
    <li>
        <span><a  href="#">Fade in Text</a></span>
        <a href="#">Slide to Right</a>
    </li>
</ul>

CSS

#socialnetworks li{
    /*border-bottom: 1px #ddd solid;
    padding-bottom: 5px;
    margin-bottom: 5px;*/
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }

#socialnetworks li:hover{ padding-left: 120px; }
#socialnetworks span{ display: none; }
#socialnetworks:hover span{ display: inline;}