JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
  
  <svg class="__svg-line" width="100%" height="100%" viewBox="none" preserveAspectRatio="none">
  <!--  preserveAspectRatio="none" xml:space="preserve"
       viewBox=" 0 0 1000 600"-->
  <rect rx="14" ry="14" stroke="white" stroke-width="2" stroke-dasharray="10 10"></rect>
</svg>
</div>

SCSS

$main-line-cutters-size: rem(10);
$main-line-width: 2;
$main-line-dasharray: 10 10;
$main-line-color: var(--cl-white);
$main-line-opacity: 0.3;
$main-line-radius: 14px;

:host {
  position: absolute;
  top: rem(10);
  right: rem(10);
  bottom: 0;

  width: auto !important;
  height: 100% !important;
}

.__svg-line {
  width: 100%;
  height: 100%;

  opacity: $main-line-opacity;

  rect {
    max-width: 100%;
    max-height: 100%;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: white;
    stroke-width: $main-line-width;
    stroke-dasharray: $main-line-dasharray;
    rx: $main-line-radius;
    ry: $main-line-radius;
  }
}

.cont {
  
  position: relative;
  
  margin: 20px; 
}

body {
  background:green ;
}