JSFiddle - React, Tailwind, and code Playground

HTML

<div >
   <svg v-else viewBox="0 0 100 100" height=100 width=100 class="fit" preserveAspectRatio="none">
      <rect
        style="fill:none;stroke-width:1px;stroke-opacity:0.5"
        vector-effect="non-scaling-stroke"
        width="99"
        height="99"
        x="0.5"
        y="0.5"
      />
      <path
        style="fill:none;stroke-width:1px;stroke-opacity:0.5"
        d="m 0.5,0.5 99,99"
        vector-effect="non-scaling-stroke"
      />
      <path
        style="fill:none;stroke-width:1px;stroke-opacity:0.5"
        d="m 99.5,0.5 -99,99"
        vector-effect="non-scaling-stroke"
      />
    </svg>
</div>

CSS

div{height:200px;
width: 300px;
stroke:black;
padding: 1em;
}
svg {
  height: 100%;
  width:100%;
  
}