JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<div id="footer"> <!--FOOTER START -->

<a href="http://www.w3.org/html/logo/">
    <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-device-semantics.png" width="132" height="45" alt="HTML5 Powered with CSS3 / Styling, Device Access, and Semantics" title="HTML5 Powered with CSS3 / Styling, Device Access, and Semantics" /> <!-- forgot the trailing slash -->
</a>

<ul>
    <a href="https://facebook.com/vivazmedia" target="_blank" title="Like Us"><li class=" social facebook"></li></a>
    <a href="http://forrst.com/people/VivazMedia" target="_blank" title="Whats Happening In The Forrst"><li class="social forrst"></li></a>
    <a href="https://plus.google.com/u/0/b/101753494478458757467/101753494478458757467/posts" target="_blank" title="Join Our Circle"><li class="social google"></li></a>
        <a href="http://instagram.com/vivazmedia" target="_blank" title="Whats Snappening"><li class="social instagram"></li></a>
        <a href="http://pinterest.com/vivazmedia" target="_blank" title="Pin With Us"><li class="social pinterest"></li></a>
        <a href="http://twitter.com/vivazmedia" target="_blank" title="Follow & Tweet Us"><li class="social twitter"></li></a>  
</ul>

<hr class="hline_color" />


</div> <!-- FOOTER CLOSE -->

CSS

#footer 
{
background-color:#313131;
height:400px;
width:100%;
margin:0;
padding:0;
}

.social {
    display: inline-block;
    width: 46px; 
    height: 45px;
}

.facebook {
        background: url('imgs/socialicons.png')  no-repeat 0 0 ;
        width: 32px;
        height: 32px;
}

.forrst {
        background: url('imgs/socialicons.png') no-repeat -64px 0;
        width: 32px;
        height: 32px;
}

.google {
        background: url('imgs/socialicons.png') no-repeat -128px 0;
        width: 32px;
        height: 32px;
}

.instagram {
        background: url('imgs/socialicons.png') no-repeat -192px 0;
        width: 32px;
        height: 32px;
}

.pinterest{
        background: url('imgs/socialicons.png') no-repeat -256px 0;
        width: 32px;
        height: 32px;
}

.twitter {
        background: url('imgs/socialicons.png') no-repeat -318px 0;
        width: 32px;
        height: 32px;
}

hr.hline_color {
   border: none;
   background:#545454;
   height:2px;
   width: 30%;
}