JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>

<img src="https://live.staticflickr.com/3443/3702141833_7ea19dbd3d_z.jpg" width="640" height="426" alt="Dog" usemap="#dogmap"/>

<map name="dogmap">
    <area class="dog1" shape="poly"...

CSS

img[usemap] {
    max-width: 100%;
    height: auto;
}

JavaScript

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
$(".dog1").on("click", function(e){
    e.preventDefault();
    alert('DOG1');
});
$(".dog2").on("click", function(e){
    e.preventDefault();
    alert('DOG2');
});