JSFiddle - React, Tailwind, and code Playground

by moeishaa

HTML

<ul id="buttons" class="clearfix">
    <a href="/" class="twitter">Twitter</a>
    <a href="/" class="facebook">Facebook</a>
</ul>

CSS

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

#buttons a {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    background: url("http://www.penn-olson.com/wp-content/uploads/2010/07/social-media-icons.jpg") no-repeat 0 0 transparent;
    text-align: center;
}

a.twitter {
    background-position: 0 0;
}