JSFiddle - React, Tailwind, and code Playground

by Shajeer Ahamed

HTML

<a href="http://instagram.com/cybrosys_08?ref=badge" ; class="ig-b- ig-b-32"><img src="//badges.instagram.com/static/images/ig-badge-32.png";
 alt="Instagram" /></a>

CSS

.ig-b- {
    display: inline-block;
}
.ig-b- img {
    visibility: hidden;
}
.ig-b-:hover {
    background-position: 0 -60px;
}
.ig-b-:active {
    background-position: 0 -120px;
}
.ig-b-32 {
    width: 32px;
    height: 32px;
    background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only scr een and (min-resolution: 2dppx) {
    .ig-b-32 {
        background-image: url(//badges.instagram.com/static/images/[email protected]);
        background-size: 60px 178px;
    }
}