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

// isto é só para gerar as cartas e misturá-las
function sortear(max) {
    return parseInt(Math.random() * max, 10);
}
var cartas = [];
for (var i = 0; i < 12; i++) {
    var coordenadas = [sortear(13) * -81 + 'px', sortear(4) * -117 + 'px'].join(' ');
    if (cartas.indexOf(coordenadas) == -1) cartas.push(coordenadas);
    else i--;
}
// fim de gerador de cartas

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