JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,0 L100,100" vector-effect="non-scaling-stroke" stroke="red" stroke-width="1" fill="none"/>
  </svg>
  some text asdasd
</section>

<section>
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,0 L100,100" vector-effect="non-scaling-stroke" stroke="red" stroke-width="1" fill="none"/>
  </svg>
  some text
</section>

CSS

section{
  margin: 20px;
  padding: 22px;
  background: whitesmoke;
  border: 1px solid royalblue;
  display: inline-block;
  position: relative;
}

section svg{
  position: absolute;
  top: 0;
  left: 0;
}