JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <svg width="100%" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="20%" width="50%" y="149" x="43" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <line id="svg_2" y2="146.000005" x2="168" y1="55.000003" x1="169" stroke-width="5" stroke="#000000" fill="none"/>
  <line id="svg_3" y2="55" x2="447" y1="55" x1="168" stroke-width="5" stroke="#000000" fill="none"/>
  <line id="svg_4" y2="374" x2="438" y1="54" x1="444" stroke-width="5" stroke="#000000" fill="none"/>
  <rect id="svg_5" height="50%" width="26%" y="367" x="183" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <line id="svg_6" y2="95" x2="505" y1="96" x1="443" stroke-width="5" stroke="#000000" fill="none"/>
  <line id="svg_7" y2="222" x2="508" y1="222" x1="439" stroke-width="5" stroke="#000000" fill="none"/>
  <line id="svg_8" y2="316" x2="504" y1="316" x1="437" stroke-width="5" stroke="#000000" fill="none"/>
  <rect id="svg_9" height="10%" width="17%" y="69" x="502" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <rect id="svg_10" height="5%" width="5%" y="197" x="501" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <rect id="svg_11" height="5%" width="8%" y="291" x="501" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>
</div>
</div>
</div>

CSS

.col-md-12{
border:1px solid red;
}