JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <svg id="SvgjsSvg1014" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 1600 1131">
    <defs id="SvgjsDefs1015"></defs>
    <g id="SvgjsG1016" title="Занятые помещения">
      <path id="SvgjsPath1017" d="M63 359 L1549 359 L1549 562 L940 562 L942 454 L871 456 L871 562 L62 564z" class="floor-square_busy"></path>
    </g>
    <g id="SvgjsG1018" title="Свободные помещения" data-toggle="popover" data-container="body" data-content="Some content inside the popover" data-placement="top">
      <path id="SvgjsPath1019" d="M873 454 L941 454 L941 561 L873 561z" class="floor-square_free">
      </path>
    </g>
  </svg>
</div>

CSS

.floor-square_free {
  fill: #679a57;
}

.floor-square_busy {
  fill: #fa2000;
}