JSFiddle - React, Tailwind, and code Playground

HTML

<div id="access">
<ul class="social-media">
<li class="twitter"><a href="http://twitter.com">Twitter</li>
<li class="facebook"><a href="http://facebook.com.com">Facebook</li>
</ul>
    </div>

CSS

#access {
margin: 0;
width: 845px;
background: #000;
height: 27px;
width: 23px;
display: inline-block;
float: left;
margin: 0;
width: 845px;
z-index: 0;
}

ul.social-media {
position: relative;
    float: right;
    right: 5px;
    top: 2px;
}

ul.social-media li {
text-indent: -999em;
    float: left;
    width: 24px;
    height: 20px;
    margin-left: 5px;
}

ul.social-media li.twitter {
background: url(http://doublecrossxx.com/images/sm_dcxx.jpg) -20px 0px no-repeat;
}

ul.social-media li.facebook {
background: url(http://doublecrossxx.com/images/sm_dcxx.jpg) 0px 0px no-repeat;
    width: 21px;
}