JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://s000.tinyupload.com/download.php?file_id=19938888534498478167&amp;t=1993888853449847816789405"></script>
<script src="http://s000.tinyupload.com/download.php?file_id=24369748615414247106&amp;t=2436974861541424710680392"></script>
<body id="app">

</body>

CSS

#app {
  height: auto;
  width: 100%;
  background: lightblue;
  cursor: url(https://volafile.org/get/t7ZLrfYYonnm/aero_arrow.cur), default;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.cursor-pointer {
  cursor: url(https://volafile.org/get/t7ZM7ffj8fCu/aero_link2.cur), pointer !important;
}
.cursor-pointer * {
  cursor: url(https://volafile.org/get/t7ZM7ffj8fCu/aero_link2.cur), pointer !important;
}
.cont {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.parent {
  background: orange;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: row wrap;
  padding: 5px;
  position: relative;
}
.child {
  width: 50px;
  height: 50px;
  margin: 4px;
  background: purple;
  padding: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  display: block;
  position: relative
}

JavaScript

var down
    var up
    var movingTimerDown
    var movingTimerUp
    document.body.onmousedown = function(){
    	document.body.classList.add('cursor-pointer')
    }
    document.body.onmouseup = function(){
      document.body.classList.remove('cursor-pointer')
    }
    var cont = document.createElement('div')
    cont.className = 'cont'
    document.body.appendChild(cont)
    let pel = document.createElement('div')
    pel.className = 'parent'
    cont.appendChild(pel)
    var complexity = 5
    for(var i=0;i<complexity*complexity;i++){
    	
    	
      	let cel = document.createElement('div')
        cel.className = 'child'
        pel.appendChild(cel)
    
    }