JSFiddle - React, Tailwind, and code Playground

by bigood

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:relative;
}
area::after{
    display:block;
    content:"10";
    position:absolute;
    left:0px;
    top:0px;
    text-align:center;
    color:white;
    width:20px;
    height:20px;
    background-color:red;
    border-radius:20px;
    border:1px solid red;
}