JSFiddle - React, Tailwind, and code Playground

HTML

<label for="test">ddddd</label>
<input id="test" />
<div class="notification"></div>

CSS

input {
  opacity: 0
}
input:focus ~ div::before {
  content: "focused!";
  display: block;
  color: orange;
}

JavaScript

function logPressing(eventName) {
 document.querySelector('div.notification').innerHTML += eventName + "<br />";
}
document.querySelector('input').addEventListener('keydown', function (ev) {
 switch(ev.key) {
   case 'ArrowLeft': 
   case 'ArrowRight':
   case 'Left': // IE
   case 'Right': // IE
        logPressing(ev.key);
        break;
 }
});