JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<table>
<tr>
  <td>x:</td>
  <td contenteditable="true" class="in">0</td>
  <td>px</td>
</tr>
</table>
<table>
<tr>
  <td>y:</td>
  <td contenteditable="true" class="in">0</td>
  <td>px</td>
</tr>
</table>

CSS

*{
  font-family: 'Helvetica';
}
table{
  display: inline-flex;
  align-items: center;
  border-collapse: collapse;
  user-select: none;
}
table, tr, td{
  border-radius: 5px;
}
tr, td{
  border: 1px solid black;
  border-collapse: collapse;
}
td{
  padding: 0 3px;
}
.in{
  width: 50px; 
  text-align: right;
}

JavaScript

let ins = document.querySelectorAll('.in')

ins.forEach((el, i) => {
  el.onclick = () => {
    document.execCommand('selectAll', false, null)
  }
  el.addEventListener('keydown', inout)

  function inout(e) {
    if (e.key == 'ArrowDown') {
      el.innerHTML = el.innerHTML - 1
    } else if (e.key == 'ArrowUp') {
      el.innerHTML = parseInt(el.innerHTML) + 1
    }
  }
})