JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='map'>
<img class='bg' src='https://www.w3schools.com/css/img_chania.jpg'>

<div class='piece one'>.</div>
<div class='piece two'>.</div>
<div class='piece three'>.</div>
<div class='piece four'>.</div>

</div>

CSS

html, body {height: 100%;}
.map {width:100%;height:100%;background-color:yellow;
  position:relative;
}
.bg {width:100%;height:100%;}
.piece {
 position:absolute;background-color:blue;
 width:8%;
 height:8%;
}
.one {top: 20%;left: 11%;}
.two {top: 59%;left: 21%;}
.three {top: 80%;left: 61%;}
.four {top: 39%;left: 41%;}