JSFiddle - React, Tailwind, and code Playground

HTML

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>

CSS

div {
    background: #ccc;
    margin: 2px;
    padding: 2px;
    font-family: arial;
}

div.focused {
    background: #eee;
}

div.editing {
    background: #050;
    color: yellow;
}

JavaScript

$$("div").each(function(el, i) {
    el.set("tabindex", i).addEvents({
        focus: function() {
            this.addClass("focused");
        },
        blur: function() {
            this.removeClass("focused");
        },
        keydown: function() {
            this.addClass("editing");
            console.log("down");
        },
        keyup: function() {
            this.removeClass("editing");
        }
    });
});

$$("div").getRandom().focus();