JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div id="left"></div>
<div id="right"></div>

CSS

* {
    font-family: Lucida Grande;
}

#left span, #right span {
    margin: 10px;
    padding: 5px;
    display: inline-block;
}

span.red:hover { background: red; }
span.green:hover { background: green; }
span.blue:hover { background: blue; }

span.red { color: white; background: red; }
span.green { color: white; background: green; }
span.blue { color: white; background: blue; }

JavaScript

var left = ["Int", "String", "Map Int Int"],
    right = ["String", "a", "Map a Int"];

var colors = ["red", "green", "blue"];

var map = [[0, 1], [1, 0], [2, 2]];

$(left).each(function(i, k) {
    $("#left").append($("<span/>").text(k));
})

$(right).each(function(i, k) {
    $("#right").append($("<span/>").text(k));
})

$(map).each(function(i, pair) {
    console.log(i, pair);
    var color = colors[i];
    var li = pair[0], ri = pair[1];
    $("#left span").eq(li).addClass(color);
    $("#right span").eq(ri).addClass(color);
    //$("#left span").eq(li).hover(function(){
        //alert("foo");
        
      //  $(this).background(color)});
});