JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<div id="map"><img src="http://placekitten.com/g/100/100" height="100" width="100" /></div>

CSS

#map { height: 100px; margin: 50px 0 0 50px; position: relative; width: 100px; }
#map a { background: #00a8ff; display: block; position: absolute; }

JavaScript

// Function to fetch JSON file and 
fetchJSON = function() {
    $.ajax({
        url: '/echo/json/',
        type: 'POST',
        data: 'json={"x1":15,"x2":25,"y1":20,"y2":30}',
        dataType: 'json',
        success: function(data) {
                
            $('<a href="#" />').appendTo('#map').css({
                height: data['y2'] - data['y1'],
                left: data['x1'],
                top: data['y1'],
                width: data['x2'] - data['x1']
            });
                
        }
    });
};

// Run the function
fetchJSON();