JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<div>
  <h1>Collisions - jump with narrow vertical gap</h1>

  <div class="grid-stack">
    
    <div id="0" gs-id="0" class="grid-stack-item" gs-x="0" gs-y="0" gs-h="1" gs-w="2">
      <div class="grid-stack-item-content">
        0
      </div>
    </div>
    <div id="1" gs-id="1" class="grid-stack-item" gs-x="2" gs-y="0" gs-h="1" gs-w="2">
      <div class="grid-stack-item-content">
        1
      </div>
    </div>
    <div id="2" gs-id="2" class="grid-stack-item" gs-x="4" gs-y="0" gs-h="2" gs-w="2">
      <div class="grid-stack-item-content">
        2
      </div>
    </div>
    <div id="3" gs-id="3" class="grid-stack-item" gs-x="0" gs-y="2" gs-h="1" gs-w="2">
      <div class="grid-stack-item-content">
        3
      </div>
    </div>
    <div id="4" gs-id="4" class="grid-stack-item" gs-x="2" gs-y="2">
      <div class="grid-stack-item-content">
        4
      </div>
    </div>
    <div id="5" gs-id="5" class="grid-stack-item" gs-x="3" gs-y="2">
      <div class="grid-stack-item-content">
        5
      </div>
    </div>
  </div>
</div>

CSS

.grid-stack {
  border: 3px solid black;
}
.grid-stack-item-content {
  padding: 10px;
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

.grid-item-handle {
   margin-left: auto;
   background-color: black;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   text-align: center;
   cursor: hand;
}

div.grid-stack-item:nth-child(1) .grid-stack-item-content { background-color: purple; }
div.grid-stack-item:nth-child(2) .grid-stack-item-content{ background-color: green; }
div.grid-stack-item:nth-child(3) .grid-stack-item-content{ background-color: orange; }
div.grid-stack-item:nth-child(4) .grid-stack-item-content{ background-color: pink; }
div.grid-stack-item:nth-child(5) .grid-stack-item-content{ background-color: aquamarine; }
div.grid-stack-item:nth-child(6) .grid-stack-item-content{ background-color: red; }

JavaScript

let text = document.querySelector('#column-text');
const checkbox = document.querySelector('input[name=interact]')

let grid = GridStack.init({
  cellHeight: 200,
  animate: false,
  float: false,
  columnOpts: {
        breakpointForWindow: false, // test window vs grid size
        breakpoints: [{ w: 720, c: 1, layout: "list" }],
      }
 })
 
 

grid.on('change', (event, items) => {
 console.log(items.reduce((m, node) => {
   m[node.el.id] = { x: node.x, y: node.y, w: node.w, h: node.h }
   return m
 }, {}))
})