JSFiddle - React, Tailwind, and code Playground

HTML

<img id="imageMaps" src="http://i.stack.imgur.com/oWffP.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
  <map id="20Keys" name="20Keys">
    <area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
    <area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
    <area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
    <area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
    <area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
    <area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
    <area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
    <area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
    <area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
    <area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
    <area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
    <area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
    <area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
    <area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
    <area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
    <area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
    <area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
    <area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
    <area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
    <area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
  </map>

JavaScript

window.onload = function () {
    var ImageMap = function (map, img) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 604;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = img.offsetWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('20Keys'), document.getElementById('imageMaps'));
    imageMap.resize();
    return;
}