JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-block">
  <img src="https://images3.alphacoders.com/583/thumb-1920-583852.jpg" width="100%">
  <div class="icons">
    <div class="icons__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur consequatur cumque cum est eligendi. Ipsam impedit qui, quos quis temporibus.</div>
    <div class="icons__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, soluta.</div>
    <div class="icons__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga similique, perspiciatis eligendi delectus officia facilis, illum architecto alias dolore et autem laudantium aliquid reprehenderit labore. Dolor nemo totam, expedita voluptatum!</div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.image-block {
  position: relative;
}
.icons__item {
  width: 200px;
  background: yellow;
  position: absolute;
  background-size: contain;
  top: 0px;
  left: 0px;
  cursor: pointer;
  transform: translate(-100px, -100%);
}
.icons__item:nth-child(1) {
  left: 20%;
  top: 30%;
}
.icons__item:nth-child(2) {
  left: 80%;
  top: 60%;
}
.icons__item:nth-child(3) {
  left: 70%;
  top: 30%;
}