JSFiddle - React, Tailwind, and code Playground

by Clare12345

HTML

<div class="map-wrapper">
    <p>Place a marker on the map</p>
    <div class="map">
        <img src="http://placehold.it/400x400" />
        <div id="place1" class="marker" title="A nice pop-over tooltip">
            P1
        </div>
        <div id="place2" class="marker" title="This is place 2">
            P2
        </div>
    </div>
</div>

CSS

.map-wrapper {
    border: 1px solid #aaa;
    padding: 10px;
    margin: 0 auto;
    width: 400px;
}
.map-wrapper > p {
    text-align: center;
}
.map {
    /* background can be removed, height and width should match that of your map image*/
    background-image: url("http://glassflooringsystems.optimizeworks.com/wp-content/uploads/2015/10/glass_flooring_background_1.jpg");
    height: 400px;
    position: relative;
    width: 400px;
}
.marker {
    /* All common marker styles go here */
    background: blue;
    color: white;
    height: 20px;
    width: 20px;
    position: absolute;
}
/* I'm using pixels here, if want a more responsive style, use percentages, that way when the map scales, the markers stay in the appropriate place*/
#place1 {
    left: 20px;
    top: 100px;
}
#place2 {
    bottom: 40px;
    right: 150px;
}