JSFiddle - React, Tailwind, and code Playground

HTML

<div id="start" class="tr">
    <div class="td_no-before"></div>
    <div class="td">000</div>
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
</div>     
<div class="tr">
    <div class="td_no-before"></div>
    <div class="td-oth">000</div>
    <div class="td-oth">111</div>
    <div class="td-oth">222</div>
    <div class="td-oth">333</div>
    <div class="td-oth">444</div>
    <div class="td-oth">555</div>
</div>

<div class="tr">
    <div class="td_no-before">информация</div>
    
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
</div>
<div class="tr">
    <div class="td_no-before">информация</div>
    
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
</div>
<div class="tr">
    <div class="td_no-before">информация</div>
    
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b>текст</b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
    <div class="td-oth"><b><input class="input" type="text"></b></div>
</div>

CSS

.input {
    width: 40px;
    text-align: center;
    border: none;
    outline:none;
}
.table {
        display: table;
        border-collapse: collapse;
        overflow: hidden;
    }
    .td_no-before {
        display: table-cell;
        border: 1px solid #b5b5b5;
        vertical-align: middle;
        padding: 2px;
    }
    
    .tr {
      display: table-row;

    }
    
    
    
    
    
    .td {

        display: table-cell;
        text-align: center;
        border: 1px solid #b5b5b5;
        vertical-align: middle;

    }


    
    .td-oth {

        display: table-cell;
        text-align: center;
        border: 1px solid #b5b5b5;
        vertical-align: middle;
        width: 40px;
    }

JavaScript

var start = document.getElementById('start');
start.focus();
start.style.backgroundColor = 'green';
start.style.color = 'white';

function dotheneedful(sibling) {
  if (sibling != null) {
    start.focus();
    start.style.backgroundColor = '';
    start.style.color = '';
    sibling.focus();
    sibling.style.backgroundColor = 'green';
    sibling.style.color = 'white';
    start = sibling;
  }
}

document.onkeydown = checkKey;

function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '38') {
    // up arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.previousElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '40') {
    // down arrow
    var idx = start.cellIndex;
    var nextrow = start.parentElement.nextElementSibling;
    if (nextrow != null) {
      var sibling = nextrow.cells[idx];
      dotheneedful(sibling);
    }
  } else if (e.keyCode == '37') {
    // left arrow
    var sibling = start.previousElementSibling;
    dotheneedful(sibling);
  } else if (e.keyCode == '39') {
    // right arrow
    var sibling = start.nextElementSibling;
    dotheneedful(sibling);
  }
}