JSFiddle - React, Tailwind, and code Playground

by BalaKrishnan Varadarajan

HTML

<ul class="channels">
                <li class="rss"><a title="Subscribe to our RSS-feed (1100K)" href="http://rss1.smashingmagazine.com/feed/">RSS</a></li>
                <li class="facebook"><a title="Join our Facebook page! (165k)" href="http://www.facebook.com/smashmag">Facebook</a></li>
                <li class="twitter"><a title="Follow us on Twitter! (748k)" href="http://twitter.com/smashingmag">Twitter</a></li>
                <li class="newsletter"><a title="Subscribe to our Email Newsletter (168k)" href="http://www.smashingmagazine.com/the-smashing-newsletter/">Newsletter</a></li>
            </ul>

CSS

.channels {
    display: block;
    float: right;
    margin: 2.5em 2.6% 0 0;
    z-index: 50;
}

.channels li {
    float: left;
    margin-left: 0.625em;
}


.channels li a {
    background-image: url("http://www.smashingmagazine.com/wp-content/themes/smashingv4/stylesheets/../images/channels.png");
    background-size: 200% auto;
    display: block;
    height: 1.4375em;
    opacity: 0.45;
    text-indent: -9999em;
    transition: all 0.3s ease 0s;
    width: 1.4375em;
}

.facebook a {
    background-position: -1.4375em -1.4375em;
}
.rss a {
    background-position: -1.4375em 0;
}
ul {
    list-style-type: none;
}

.twitter a {
    background-position: -1.4375em -2.875em;
}
.newsletter a {
    background-position: -1.4375em -4.3125em;
}
.channels li a:hover, .channels li a:focus {
    opacity: 1;
}