JSFiddle - React, Tailwind, and code Playground

HTML

<box>
<p>Use arrows <z>⇄</z></p>
  <item class="focus">Apples</item>
  <item>Butter</item>
  <item>Charlie</item>
  <item>Duff</item>
</box>

CSS

body {
  height: 100vh;
  margin: 0em;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 16px 'Segoe UI', sans-serif;
  overflow: hidden;
  user-select: none;
  background: #eaeaea;
  --red: rgba(255, 69, 58, 1);
  --green: rgba(48, 209, 88, 1);
  --blue: rgba(10, 132, 255, 1);
  --orange: rgba(255, 159, 10, 1);
  }

box {
  display: block;
}

p {
  text-align: center;
}

z {
  display: inline-block;
  transform: rotate(90deg);
}

item {
  width: 10em;
  height: 2em;
  margin: 0.5em;
  border-radius: 0.5em;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}

item.focus {
  background: rgba(10, 132, 255, 1);
  cursor: pointer;
  color: #fff;
}

JavaScript

var n = 0;
document.addEventListener('keydown', function(e) {
  e.preventDefault();
  var items = document.querySelectorAll('item');
  items.forEach((i)=>{i.classList.remove('focus')});
  if(e.keyCode === 38 && n > 0) {n--}
  if(e.keyCode === 40 && n < items.length - 1) {n++}
  items[n].classList.add('focus');
});