JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-map">
    <a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
    <a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
    <a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>

CSS

.image-map {
      background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
      width: 275px;
      height: 95px;
      display: block;
      position: relative;
      margin-top:10px;
      float: left;
    }

    .image-map > a.map {
      position: absolute;
      display: block;
      border: 1px solid green;
    }

JavaScript

$(document).ready(function() {
    $(".map").click(function() {
       alert("You clicked on " + $(this).attr('rel'));
    }); 
});