JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theatre">
  <div class="container">
        <div id="bmessage">Select the seats that you need.</div>
        <div id="seats">
        <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>       
        <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
        <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>       
        <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div>
  </div>
</div>

CSS

.container {
  margin: 0 auto;
}

#bmessage {
    padding: 1px 3px;
    height: 20px;
    font-size: 14px;
    background: #ddf;
    color: #080;
    font-weight: bold;
}
#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

#seats div {
    position: absolute;
    width: 1.5%;
    height: 1.5%;
}

#seats .s1.std.grey {
    background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center;
    background-size: cover;
}