JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="container">
	
		<div id="block1" class="bloco"></div>
		<div id="block2" class="bloco"></div>
		<div id="block3" class="bloco"></div>
		<div id="block4" class="bloco"></div>
		<div id="block5" class="bloco"></div>
		<div id="block6" class="bloco"></div>
		<div id="block7" class="bloco"></div>
		<div id="block8" class="bloco"></div>
		<div id="block9" class="bloco"></div>
		<div id="block10" class="bloco"></div>
		<div id="block11" class="bloco"></div>
		<div id="block12" class="bloco"></div>
		<div id="block13" class="bloco"></div>
		<div id="block14" class="bloco"></div>
		<div id="block15" class="bloco"></div>
		<div id="block16" class="bloco"></div>
    
    <div id="div1" class="pecas parte-1"></div>
		<div id="div2" class="pecas parte-2"></div>
		<div id="div3" class="pecas parte-3"></div>
		<div id="div4" class="pecas parte-4"></div>
		<div id="div5" class="pecas parte-5"></div>
		<div id="div6" class="pecas parte-6"></div>
		<div id="div7" class="pecas parte-7"></div>
		<div id="div8" class="pecas parte-8"></div>
		<div id="div9" class="pecas parte-9"></div>
		<div id="div10" class="pecas parte-10"></div>
		<div id="div11" class="pecas parte-11"></div>
		<div id="div12" class="pecas parte-12"></div>
		<div id="div13" class="pecas parte-13"></div>
		<div id="div14" class="pecas parte-14"></div>
		<div id="div15" class="pecas parte-15"></div>
		<div id="div16" class="pecas parte-16"></div>
		
		
	</div>

CSS

.container{
width: 629px;
height:325px;
border:3px solid white;
}

.bloco {
    width: 156px;
    height: 80px;
	float:left;
	margin-left:1px;
	margin-top:1px;
	position:relative;
	z-index:2;
}

.pecas{
     background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bb/Survolt.jpg);
	background-size: 624px 320px;
    width: 156px;
    height: 80px;
    float:left;
	margin-left:1px;
	margin-top:1px;
	position:absolute;
    z-index:1;
}

.parte-1 {
    background-position: 624px 320px;
}

.parte-5 {
    background-position: 624px 240px;
}

.parte-9 {
    background-position: 624px 160px;
}

.parte-13{
    background-position: 624px 80px;
}


.parte-2 {
    background-position: 468px 320px;
}

.parte-6 {
    background-position: 468px 240px;
}

.parte-10 {
    background-position: 468px 160px;
}

.parte-14{
    background-position: 468px 80px;
}



.parte-3 {
    background-position: 312px 320px;
}

.parte-7 {
    background-position: 312px 240px;
}

.parte-11 {
    background-position: 312px 160px;
}

.parte-15{
    background-position: 312px 80px;
}


.parte-4 {
    background-position: 156px 320px;
}

.parte-8 {
    background-position: 156px 240px;
}

.parte-12 {
    background-position: 156px 160px;
}

.parte-16{
    background-position: 156px 80px;
}

JavaScript

cont = 0;
$(".bloco").click(function()
{
    cont++;
    if(cont==1)
    {
        pieceNomeUm =  $(this).attr("id");
    };

    if(cont==2)
    {
        pieceNomeDois =  $(this).attr("id");
        
        var block1=$('#'+pieceNomeUm).attr('id');
        var div1=$('#'+pieceNomeUm).attr('div');
        
        var block2=$('#'+pieceNomeDois).attr('id');
        var div2=$('#'+pieceNomeDois).attr('div');
        
        anda(block1,div2);
        anda(block2,div1);
        cont = 0;
           
    }
});	

start=function(){
    for (i=1; i<17; i++){
        var x = $('#block'+i).offset();
        pieceTopDois = x.top;
        pieceLeftDois = x.left;
        $('#div'+i).css({
            top:pieceTopDois,
            left:pieceLeftDois
        });
        liga('block'+i,'div'+i)
    }
};

liga=function(block,div){
	$('#'+block).attr('div',div);
};

anda=function(block,div){
    var x = $('#'+block).offset();
	 $("#"+div).animate({top: x.top, left:x.left});
    liga(block,div);
};

$(document).ready(function(){start();});