JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <g id="underlay">
    <polygon class="t1" points="10,10 10,390 390,390 10,10" />
    <polygon class="t2" points="10,10 390,390 390,10 10,10" />
  </g><g id="content">
    <polygon class="t1" points="10,10 10,390 390,390 10,10" />
    <polygon class="t2" points="10,10 390,390 390,10 10,10" />
  </g>
</svg>

CSS

.t1 { fill:rgb(140,90,90); stroke:rgb(140,90,90) }
.t2 { fill:rgb(90,140,90); stroke:rgb(90,140,90) }
#underlay polygon { stroke-width:1px }
#content  polygon { stroke:none      }