JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map">
    
</div>
<div id="content">
    Default
</div>

CSS

#map {
    background: blue;
    position: relative;
    width: 200px;
    height: 200px;
}

#map a {
    display: block;
    background: white;
    position: absolute;
}

#content {
    background: red;
    color: white;
}

JavaScript

var plots = [
    {"width":30,"height":30, "top": 150, "left": 100, "content": "Lorem"},
    {"width":20,"height":20, "top": 100, "left": 20, "content": "Ipsum"},
    {"width":50,"height":50, "top": 20, "left": 20, "content": "Dolor"}
];
var $content = $("#content");
var $map= $("#map");
$.each(plots, function() {
    var plot = this;
    var $plot = $("<a />")
   .css({
        'width': plot.width,
        'height': plot.height,
        'top': plot.top,
        'left': plot.left
    })
    .hover(function() {
        $content.html(plot.content);
    });
    $map.append($plot);
});