JSFiddle - React, Tailwind, and code Playground

HTML

<div id="geral">
    <div id="pos_1"></div>
    <div id="pos_2"></div>
    <div id="pos_3"></div>
    <div id="pos_4"></div>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}
#geral > div {
    float: left;
    width: 100%;
    padding: 11px;
}
.carta {
    background-image: url(http://i.stack.imgur.com/WZ9Od.gif);
    width: 82px;
    height: 118px;
    float: left;
}

JavaScript

$('#geral > div').each(function (i) {
    var html = '';
    for (var j = 0; j < 3; j++) {
        var coordenadas = [i * -81 + 'px', j * -117 + 'px'];
        html += '<div class="carta" style="background-position: ' + coordenadas.join(' ') + '"></div>';
    }
    this.innerHTML = html;
});