JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg version="1.1" viewBox="0 0 1000 1392" preserveAspectRatio="xMinYMin meet">
  <image width="1000" height="1392" xlink:href="https://u.realgeeks.media/lakewoodranchlife/maps/Lakewood_Ranch_Village_Map_1000px.png">
  </image>

  <g opacity="0">
    <a xlink:href="/top-left">
      <rect x="0" y="0" width="100" height="30"></rect>
    </a>
    <a xlink:href="/bottom-right">
      <rect x="900" y="1300" width="100" height="30"></rect>
    </a>
    <a xlink:href="/arbor" xlink:title="Arbor">
      <rect x="289" y="98" width="132" height="37"></rect>
    </a>
  </g>
</svg>

CSS

body {
  margin: 0;
}

svg {
  width: 100%;
}