JSFiddle - React, Tailwind, and code Playground
CSS
body{
margin:50px;
}
#sosial{
background:#fff;
border:solid 1px #ddd;
padding:10px;
height:auto;
width:200px;
border-radius:5px;
font-family: Courier New, Courier, monospace;
font-size:15px;
color:#000;
letter-spacing:-1px;
}
#sosial li{
list-style:none;
line-height:25px;
}
#sosial a{
color:#000;
text-decoration:none;
}
#sosial .facebook{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
border-radius:5px;
background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
}
#sosial .facebook:hover{
width:180px;
background:#3B5998;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
#sosial .subs a:hover, #sosial .gplus a:hover, #sosial .facebook a:hover{
color:#fff;
}
/* Twitter */
#sosial .twitter{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
border-radius:5px;
background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
}
#sosial .twitter:hover{
width:180px;
background:#51C9D4;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Google Plus */
#sosial .gplus{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
border-radius:5px;
background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
}
#sosial...