JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
  <rect class="example" width="100%" height="100%" />
</svg>

SCSS

svg {
  --width: .4rem;

  width: 100%; height: 100%;
  overflow: visible;

  rect {
    stroke-width: var(--width);
    rx: 1.2rem;
    ry: 1.2rem;
    stroke-dasharray: 10 6;
    stroke-linejoin: round;

    fill: none;
    stroke: red;
  }
}


html {
  font-size: 10px;
}

body {
  padding: 3rem;
}