JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="svg-component">
    <svg

   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg8"
   version="1.1"
   viewBox="0 0 508 285">
  <defs>
    <clipPath
       id="clipPath"
       clipPathUnits="userSpaceOnUse">
      <path
         id="path831"
         d="M -281.2143,49.803571 H 226.78571 V 325.99238 c -194.024338,46.42099 -335.52323,-126.06377 -508.00001,0 z"
         style="fill:#666666;" />
    </clipPath>
  </defs>
  <g
     transform="translate(281.21429,-49.803571)"
     id="layer1">
    <image
       clip-path="url(#clipPath)"
       width="508"
       height="285.75"
       preserveAspectRatio="none"
       style="image-rendering:optimizeQuality"
       xlink:href="https://wallpapershome.ru/images/pages/pic_h/5286.jpg"
       id="image823"
       x="-281.21429"
       y="49.80357" />
  </g>
</svg>
  </div>
  <div class="sub-header">
    <h2>this is svg adaptive background for header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod sapiente reiciendis molestias architecto cum quos facilis, praesentium harum officia consectetur. Error dolor officiis fugiat natus quibusdam vero inventore aperiam amet.</p>
  </div>
  </header>

CSS

*{
  margin:0;
  padding:0;
}
header{
  width:100%;
  position: relative;
}
.sub-header{
  position: absolute;
  top:50%;
  width:90%;
  left:5%;
  color:red;
  transform:translateY(-50%);
  background:rgba(0,0,0,.2);
  padding:20px;
}
.sub-header h2{
  text-transform:uppercase;
}
.sub-header p{
  font-variant:small-caps;
}