JSFiddle - React, Tailwind, and code Playground

HTML

<map name="image-map">
    <area id="a1" title="wikipedia" href="https://wikipedia.org" shape="rect" coords="54,36,66,49"> 
    <area id="a2" title="foo" href="#foo" shape="rect" coords="72,38,83,48"> 
    <area id="a3" title="bar" href="#bar" shape="rect" coords="56,4,80,28">  
    <area id="a4" title="baz" href="#baz" shape="rect" coords="7,7,45,46">   
    <area id="a5" title="fizz" href="#fizz" shape="rect" coords="10,59,76,125">
    <area id="a6" title="buzz" href="#buzz" shape="rect" coords="93,9,199,122">
</map>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />

CSS

area:hover::after {
  position: absolute;
  display: block;
  background-color: rgba(0,0,0,.2);
  content: ' ';
}

#a1::after {
  top: 44px;
  left: 61px;
  width: 15px;
  height: 15px;
}

#a2::after {
  top: 44px;
  left: 76px;
  width: 16px;
  height: 16px;
}

#a3::after {
  top: 10px;
  left: 61px;
  width: 32px;
  height: 32px;
}

#a4::after {
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
}

#a5::after {
  top: 61px;
  left: 10px;
  width: 85px;
  height: 85px;
}

#a6::after {
  top: 10px;
  left: 95px;
  width: 135px;
  height: 135px;
}