JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer'>
  <div class='inner left'>
    тут какой то контент
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" id="bg" width="100%" height="100%">
    <defs> 
<linearGradient id="lgrad" x1="50%" y1="0%" x2="50%" y2="100%" > 
<stop offset="0%" style="stop-color:rgb(5,34,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,128,128);stop-opacity:1" />
</linearGradient> 
</defs>
      <path  fill="url(#lgrad)" fill-rule="evenodd" clip-rule="evenodd" d="M0 0 H100 L100 0 0 100 v0 z"></path>
    </svg>
  </div>
  <div class='inner right'>
    
  </div>
</div>

SCSS

body,html{
  height: 100%;
}

div.inner{
height: 100%;
width: 50%;
position: relative;

}
div.outer{
height: 100%;
display: flex;
}

.right{
  
  background: yellow;
}

svg{
  position: absolute;
  right: -40%;
  top:0;
  z-index:1;
  width: 40%;
  fill: blue;
}