JSFiddle - React, Tailwind, and code Playground
HTML
<p class="parent">
<img class="map" src="https://media.dndbeyond.com/compendium-images/lmop/M14LHJMMQhUuZ46S/map-1.1-Cragmaw-Hideout-player.jpg" alt="" width="860" height="600" />
<img class="token-1" src="https://www.dndbeyond.com/avatars/24423/721/637829134794751920.jpeg?width=40&height=40&fit=crop&quality=95&auto=webp" alt="" />
<img class="token-2" src="https://www.dndbeyond.com/avatars/thumbnails/0/350/140/140/636252777818027282.jpeg" />
</p>
CSS
.parent {
position: relative;
top: 0;
left: 0;
}
.map {
position: relative;
top: 0;
left: 0;
}
.token-1 {
position: absolute;
top: 315px;
left: 430px;
width: 28px;
height: 28px;
border: red solid 1px;
}
.token-2 {
position: absolute;
top: 315px;
left: 460px;
width: 28px;
height: 28px;
border: blue solid 1px;
}