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

#theatre {
    width: 650px;
    float: left;
    padding-right: 5px;
    margin: 25px 15px 0 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

#bmessage {
    padding: 1px 3px;
    height: 20px;
    font-size: 14px;
    background: #ddf;
    color: #080;
    font-weight: bold;
}
#seats:before {
    content: url('http://i.imgur.com/qn56yss.gif');
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
}

#seats div {
    position: absolute;
    width:15px;
    height:15px;
}

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