JSFiddle - React, Tailwind, and code Playground

by Vicky Leong

HTML

<div>
    <div class="wrapper">
        <!--Left Col-->
      <div class="container">
          <div class="inner_container" id="container1">
              <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
              <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
              <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
          </div>
      </div

        <!--Right Col-->
        <div class="container">
            <div class="inner_container" id="container2">
            <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon1" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon2" data-target="pop5"  />
          <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Start-Menu-Search-icon.png" alt="info" class="info-icon info-icon3" data-target="pop5"  />
            </div>
        </div>

    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
.wrapper{
    width:100%; 
    float:left; 
    height:637px;
}
.container {
  position: relative;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.container:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner_container {
    background-size:100% auto;
    background-repeat: no-repeat;
    border:5px solid #187BB7;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#container1{
    background-image:url(http://i2.wp.com/theultralinx.com/wp-content/uploads/2015/02/tumblr_njxiyeoMUt1qkegsbo1_500.jpg?resize=450%2C610);
}
#container2{
    background-image:url(http://decoratedlife.com/wp-content/uploads/2013/05/pinterest-small-room.jpg);
}
img.info-icon{
  cursor: pointer;
  z-index: 1001;
  background-color:white;
  width: 7%;
}
#container1 .info-icon1{
  position: absolute;
  top: 65%;
  left: 70%;
}
#container1 .info-icon2{
  position: absolute;
  top: 20%;
  left: 25%;
}
#container1 .info-icon3{
  position: absolute;
  top: 70%;
  left: 16%;
}
#container2 .info-icon1{
  position: absolute;
  top: 75%;
  left: 72%;
}
#container2 .info-icon2{
  position: absolute;
  top: 23%;
  left: 23%;
}
#container2 .info-icon3{
  position: absolute;
  top: 74%;
  left: 15%;
}