JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<div id="lps-map"> 
    <img class="img" src="//totallytotallyamazing.com/img_jsFiddle/go.png" alt=""/>
   <a class="lps loc1" href="#">area 1</a> 
   <a class="lps loc2" href="#">area 2</a> 
   <a class="lps loc3" href="#">area 3</a> 
   <a class="lps loc4" href="#">area 4</a> 
 </div>

CSS

#lps-map {
position:relative;
border:solid 2px pink;
width:400px;
height:400px;
}

#lps-map .lps {
position:absolute;
top:0;
left:0;
display:block;
border:solid 1px green;
}

#lps-map .lps.loc1 {
left:5%;
top:17%;
width:38%;
height:37%;
}

#lps-map .lps.loc2 {
left:26%;
top:54%;
width:35%;
height:40%;
}

#lps-map .lps.loc3 {
left:60%;
top:54%;
width:32%;
height:40%;
}

#lps-map .lps.loc4 {
left:64%;
top:30%;
width:34%;
height:20%;
}