JSFiddle - React, Tailwind, and code Playground

by salt

HTML

<div class="container">
  <div id="plan-boutiques"><img src="https://media.designrush.com/tinymce_images/79179/conversions/website-dimensions-content.jpg">
    <a href="" id="first_element"><p></p></a>
    <a href="" id="second_element"><p></p></a>
    <a href="" id="third_element"><p></p></a> 
  </div>
</div>

CSS

#plan-boutiques {
    display: inline-block;
    position: relative;
}
#plan-boutiques > img {
  width: 100%;
  height: auto;
  max-width: 685px;
  max-height: 374px;
 }
.container {
  width:100%; 
  margin:0 auto;
}

 #plan-boutiques a {
  background-color: red;
  border-radius: 100px;
  background-repeat: no-repeat;
  display:block;
  height:10px;
  width:10px;
  position:absolute;
  line-height: 25px;
  color:#fff;
  text-align:center;
  font-size:1px;
  background-position: 0 -27px;
 }

#plan-boutiques a:hover {
  background-position: 0 0;
}  
a#first_element {
  margin-left: 2.92%;
  margin-top: -8.02%;
}

a#second_element {
  margin-left: 11.68%;
  margin-top: -24.06%;
}
a#third_element {
  margin-left: 5.84%;
  margin-top: -16.04%;
}