JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="svg-container">

  <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 984 728"
       class="svg-content-responsive" overflow="hidden">
    <rect x="20" y="20" width="944" height="50" style="fill: rgb(255, 0, 0);"></rect>
    <rect x="20" y="658" width="944" height="50" style="fill: rgb(0, 255, 0);"></rect>
  </svg>
  
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.svg-container {
  width: 100vw;
  height: 100vh;
  background-color: #ffff00;
}

.svg-content-responsive {
  display: block;
  background-color: #0000ff;
}