JSFiddle - React, Tailwind, and code Playground

HTML

<a class="block" href="#">Блок 1</a>
<a class="block" href="#">Блок 2</a>
<a class="block" href="#">Блок 3</a>
<a class="block" href="#">Блок 4</a>
<a class="block" href="#">Блок 5</a>

CSS

a {
  font-family: Arial, sans-serif;
  display: block;
  width: 200px;
  margin: 8px 0;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: white;
  background: gray;
}

a:focus {
  outline: 2px solid red;
}

JavaScript

$(function() {

  var $blocks = $(".block");



  $blocks.click(function(event) {
    event.preventDefault();
  });

  $(window).on("keydown", function(event) {
    var $active = $(document.activeElement);

    if (!$active.is($blocks)) return;

    var currentIndex = $blocks.index($active),
        nextIndex;

    switch (event.which) {
      case 38:
        if (currentIndex > 0) nextIndex = currentIndex - 1;
        break;
      case 40:
        if (currentIndex < $blocks.length - 1) nextIndex = currentIndex + 1;
        break;
    }

    if (nextIndex != undefined) {
      $blocks.eq(nextIndex).focus();
      event.preventDefault();
    }
  });

});