JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/fd/09/4d/fd094df0bab6e4ae58eaafe3dd8530b3.jpg">
  <span class="metka left" style="top:54.5%;left:52.5%;" title="metka1">metka1</span>
  <span class="metka right" style="top:33.2%;right:31.2%;" title="metka2">metka2</span>
</div>

CSS

html,body{margin:0;padding:0;height:100%;}
.map{
  position:relative;
  width:100%;
  overflow:hidden;}
.map img{
  position:relative;
  top:0;
  left:0;
  width:100%;
  z-index:0;}
.metka{
  position:absolute;
  z-index:1;
  padding:0 3vw;
  font-size:14px;
  text-shadow: 0px 0px 2px white}
.metka.left:before{
  content:'';
  position:absolute;
  display:block;
  top:1vw;
  left:0;
  width:2vw;
	height:2vw;
	background:red;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;}
.metka.right:before{
  content:'';
  position:absolute;
  display:block;
  top:1vw;
  right:0;
  width:2vw;
	height:2vw;
	background:red;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;}