JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<svg width="100%" height="100%">
<line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2"  />
<line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box2">
<svg width="100%" height="100%">
<line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2"  />
<line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box">
<svg width="100%" height="100%">
<line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2"  />
<line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>
<div class="box2">
<svg width="100%" height="100%">
<line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2"  />
<line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2"  />
</svg>
</div>

CSS

.box{
  width: 100%;
  height: 300px;
  position: relative;
}
.box2{
  width: 100%;
  height: 300px;
  position: relative;
}