JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<ul id="sosial">
    <li><a href="#" id="facebook">Facebook</a></li>
    <li><a href="#" id="linkedin">Linkedin</a></li>
    <li><a href="#" id="twitter">Twitter</a></li>
    <li><a href="#" id="youtube">YouTube</a></li>
</ul>

CSS

#sosial{
width: 276px;
height: 64px;
margin: 0 auto;
padding: 0;
list-style: none;
}

#sosial li {
width: 64px;
height: 64px;
float: left;
margin-right: 5px;
}

#sosial a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out
}

#sosial a:hover {
background-position: 0 5px;
-webkit-transform:translate(0,.1em);
-moz-transform:translate(0,.1em);
-o-transform:translate(0,.1em)
}

#facebook {
background-image:...