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" alt="Kitten 1" href="#"></area>
</map>

CSS

area{
    display:block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 120px;
    height: 100px;
    
}
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;
}