JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-0" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 40-20" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-20" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 60-40" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 80-60" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 40-60" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-80" alt="" />

CSS

.sprite {
    background: url("http://goo.gl/3pFUfC") -10000px -10000px transparent;
    border: 1px solid red;
}

JavaScript

for (var i = 0, imgs = document.getElementsByClassName('sprite'), len = imgs.length, size; i < len; i++) {
    size = imgs[i].className.match(/(\d+)\-(\d+)/);
    imgs[i].style.backgroundPosition = '-'+ (size[1]) +'px -'+ (size[2]) +'px';
}