JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="third">
<a href="http://zornet.ru/load/81">
<div class="sprite_face_rotate">
</div>
</a>
<a href="http://zornet.ru/load/142">
<div class="sprite_rss_rotate">
</div>
</a>
<a href="http://zornet.ru/load/145">
<div class="sprite_linked_rotate">
</div>
</a>
<a href="#">
<div class="sprite_pint_rotate">
</div>
</a>
<a href="#">
<div class="sprite_share_rotate">
</div>
</a>
<a href="#">
<div class="sprite_youtube_rotate">
</div>
</a>
<a href="#">
<div class="sprite_twitter_rotate">
</div>
</a>
</div>

CSS

/* Third */

.third {
width: 440px;
height: 100px;
}

.sprite_face_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -47px -28px;
width: 55px;
height: 54px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_face_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position:-47px -96px;
width: 55px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.sprite_rss_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -106px -28px;
width: 56px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_rss_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -106px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_linked_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -167px -28px;
width: 56px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_linked_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -167px -96px;
width: 56px;
height:...