JSFiddle - React, Tailwind, and code Playground

by borayeris

HTML

<div class="mapwrap"><img class="map" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/spain-map.jpg" alt="Map" />
<a class="mappin" style="top: 10%; left: 26%;" href="#wpcf7-f1811-p1813-o1" data-option="Galicia"><img title="Galicia" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="Galicia" /></a>
<a class="mappin" style="top: 5%; left: 37%;" href="#wpcf7-f1811-p1813-o1" data-option="Principado de Asturias"><img title="Principado de Asturias" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="Principado de Asturias" /></a>
<a class="mappin" style="top: 6%; left: 47.6%;" href="#wpcf7-f1811-p1813-o1" data-option="Cantabria"><img title="Cantabria" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="Cantabria" /></a>
<a class="mappin" style="top: 7%; left: 55.5%;" href="#wpcf7-f1811-p1813-o1" data-option="País Vasco"><img title="País Vasco" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="País Vasco" /></a>
<a class="mappin" style="top: 14%; left: 55.5%;" href="#wpcf7-f1811-p1813-o1" data-option="La Rioja"><img title="La Rioja" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="La Rioja" /></a>
<a class="mappin" style="top: 11%; left: 61%;" href="#wpcf7-f1811-p1813-o1" data-option="Comunidad Foral de Navarra"><img title="Comunidad Foral de Navarra" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="Comunidad Foral de Navarra" /></a>
<a class="mappin" style="top: 20%; left: 66%;" href="#wpcf7-f1811-p1813-o1" data-option="Aragón"><img title="Aragón" src="http://www.fjgestioncomercial.es/tecnikor/wp-content/uploads/2017/05/50x65.png" alt="Aragón" /></a>
<a class="mappin" style="top: 20%; left: 79%;" href="#wpcf7-f1811-p1813-o1" data-option="Cataluña"><img title="Cataluña"...

CSS

.mapwrap {
	position: relative;
	line-height: 0px;
	font-size: 0px;
}
.mapwrap img.map{
    width: 100%;
}
.mapwrap a.mappin{
    position: absolute;
}
.mapwrap a.mappin img{
    width: 10px;
    height: auto;
}
@media all and (min-width: 1000px){
    .mapwrap a.mappin img{
        width: 30px;
        height: auto;
    }
}