JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://i.imgur.com/phP5dSQ.png" draggable="true" alt="drag the cat" width="50">
<table id="tbl">
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

CSS

td {
  border-bottom: solid 1px gray;
  border-right: solid 1px gray;
  width: 100px;
  height: 100px;
}
.hilight {
  background-color: yellow;
}

JavaScript

const hilight = evt => {
  if (evt.toElement.matches('td'))
    evt.toElement.classList.add('hilight')
}
const blur = evt => {
  if (evt.toElement.matches('td'))
    evt.toElement.classList.remove('hilight')
}

tbl.addEventListener('dragenter', hilight)
tbl.addEventListener('dragleave', blur)