JSFiddle - React, Tailwind, and code Playground

by aasthatuteja

HTML

<section class="sidebar">
    <ul>
        <li class="facebook">Facebook</li>
        <li class="linkedin">LinkedIn</li>
        <li class="twitter">Twitter</li>
        <li class="google-plus">Google+</li>
    </ul>
</section>

CSS

.sidebar ul {
        float: left;
    }
    .sidebar ul li {
        display: block;
        width:35px;
        text-indent: -9999px;
        margin: 3px;
    }
    li.facebook {
        height: 35px;
        background: url(img/icon_face.png) center center no-repeat;
        background-size: contain;
    }
    li.twitter {
        height: 35px;
        background: url(img/icon_twitter.png) center center no-repeat;
        background-size: contain;
    }
    li.google-plus {
        height: 35px;
        background: url(img/icon_g+.png) center center no-repeat;
        background-size: contain;
    }
    li.linkedin {
        height: 35px;
        background: url(img/icon_in.png) center center no-repeat;
        background-size: contain;
    }