JSFiddle - React, Tailwind, and code Playground
by Fransiskus Fallo
HTML
<style>
#socialbdrssliding a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
overflow: hidden;
}#socialbdrssliding a:hover{
width: 100px;
overflow: hidden;
}#socialbdrssliding {
float: right;
position: relative;
height: 40px;
}#socialbdrssliding ul { margin: 0; }
#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-thumb,
#socialbdrssliding li .bdrs-title {
display: block;
position: relative;
width: 40px;
height: 40px;
}#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-title {
float: left;
width: auto;
overflow: hidden;
}#socialbdrssliding li a {
width: 40px;
line-height: 40px;
color: #E9E9E9;
font-size: 11px;
font-weight: bold;
text-shadow: 1px 2px 2px #000;
text-decoration: none;
}#socialbdrssliding li .bdrs-thumb { float: left; }
#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }
#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background:
url("http://1.bp.blogspot.com/-ZXAdQPhrGPI/UnY1jy86NFI/AAAAAAAAB_E/w9k1NSlv7qY/s1600/FACEBOOK.png")
no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background:
url("http://1.bp.blogspot.com/-6kXAR8gUIJI/UnY1juBh0PI/AAAAAAAAB_A/k2VxWHM0Lco/s1600/googleplus.png")
no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background:
url("http://1.bp.blogspot.com/-Tdm-eNud6rU/UnY1jYdKh9I/AAAAAAAAB-8/cS-j5ZdWPf8/s1600/TWITTER.png")
no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background:
url("http://4.bp.blogspot.com/-2OHUHeGD494/UnY1l485tVI/AAAAAAAAB_U/l9JGli_YD7c/s1600/rssbd.png")
no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color:...