JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map">
    <div class="location" id="muenchen" style="left:66%;top:86%"></div>
    <div class="location" id="rosenheim" style="left:72%;top:94.5%"></div>
    <div class="location" id="stuttgart" style="left:40%;top:85%"></div>
</div>

CSS

.map {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 119.55645161%; /* ((height/width)*100) = ((593/496)*100) */
    background-size: 100%;
}

.map,
.location {
    background-image: url(http://test.thirty3.de/karten-test/img/sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.location {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 50px;
    margin-top: -50px;
    margin-left: -17px;
    background-position: 0 -646px;
}