JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="page-wrapper">
    <div class="draggable-block"></div>
</div>

CSS

#page-wrapper{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.guide-line {
  position: absolute;
  opacity: 0.3;
  top: -50px;
  left: -50px;
  background-color: black;
}

.vertical-line {
  height: 1000px;
  width: 1px;
}

.horizontal-line {
  height: 1px;
  width: 1000px;
}

.draggable-block {
    width: 130px;
    height: 130px;
    background-color: red;
    position: absolute;
    top: 120px;
    left: 120px;
}

JavaScript

var grid = $('<div>', {'id': 'grid'});
    
    var guideLinePos = 20;
    var guideLabel = "";
    while(guideLinePos <= 1000) {
      if(((guideLinePos - 20) % 20) == 0) {
        guideLabel = "<div class='guide-line vertical-line'></div>";
        $(guideLabel).css( "left", guideLinePos+"px" ).appendTo(grid);
      }
      guideLinePos = (guideLinePos + 20);
    }

    guideLinePos = 20;
    guideLabel = "";
    while(guideLinePos <= 1000) {
      if(((guideLinePos - 20) % 20) == 0) {
        guideLabel = "<div class='guide-line horizontal-line'></div>";
        $(guideLabel).css( "top", guideLinePos+"px" ).appendTo(grid);
      }
      guideLinePos = (guideLinePos + 20);
    }
    grid.appendTo($("#page-wrapper"));  



$(".draggable-block").draggable({
    snapTolerance: 20,
    snap: '.guide-line'
});