JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable1"></div>
<div class="draggable1"></div>
<div class="draggable1"></div>
<div class="draggable1"></div>
<br/>
<div class="draggable2"></div>
<div class="draggable2"></div>
<div class="draggable2"></div>
<div class="draggable2"></div>

CSS

.draggable1, .draggable2 {
    width:38px;
    height:38px;
    border: 1px solid black;
}
.draggable1 {
    background: aqua;
} 
.draggable2 {
    background: orange;
}

JavaScript

$(".draggable1").draggable({
    grid:[20, 20] 
});

$(".draggable2").draggable({
    grid:[40, 40] 
});