JSFiddle - React, Tailwind, and code Playground

HTML

<img src="//placekitten.com/300/200" USEMAP="#map_1"></img>
<map name="map_1">
    <area
      Shape="rect"
      coords="20,40,120,100"
      style="top: 20px; left: 40px; width: 120px; height: 100px;"
      alt="Kitten 1"
      href="#"></area>
</map>

CSS

area{
    display:block;
    position: absolute;
}
area::after{
    display:block;
    content:"10";
    position:absolute;
    right: 20px;
    top: 40px;
    text-align:center;
    color:white;
    width:20px;
    height:20px;
    background-color:red;
    border-radius:20px;
    border:1px solid red;
}