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&amp;height=40&amp;fit=crop&amp;quality=95&amp;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;
}