JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<body>
  <div style="font-family:Open Sans;font-size:15px;padding:30px;position:absolute;">
    Test for text clickable on mobile
  </div>
  <svg width="600px" height="600px" fill-opacity="0.8">
    <circle r="200" cx="300" cy="300" style="fill:#11db4d;">
    </circle>
    <g transform="translate(100,100)">
    <!--LINK EMBEDDED IN SVG-->
    <a href="https://www.nzz.ch" target="_blank" class="tab-svg-link">
      <svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold" class="tab-svg-object">
        <text x="50%" y="50%" text-anchor="middle" fill="white">CLICKME</text>
      </svg>
    </a>
  </g>
  </svg>
</body>

</html>

CSS

.tab-svg-link {
  display: block;
  padding-right: 10px;
  padding-left: 15px;
  padding-top: 20px;
}
.tab-svg-link:after {
  content:"";
  display:table;
  clear:both;
}
.tab-svg-object {
  pointer-events: none;
  display: block;
}