JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg class="tw-svg-clip">
  <defs>
      <clipPath
          id="navMask"
          clipPathUnits="objectBoundingBox">
          <polygon points="0,0 1318,0 1440,0 1440,775 1013,775 1318,0 0,0"/>
      </clipPath>
  </defs>
</svg>

<div></div><!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="481.2px"
	 height="835px" viewBox="0 0 481.2 835" style="overflow:visible;enable-background:new 0 0 481.2 835;" xml:space="preserve">

<defs>
</defs>
<path class="st0" d="M481.2,0v835H0c16.4,0,31.2-10,37.2-25.3L356.1,0H481.2z"/>
</svg>

CSS

div {
  position: fixed;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background: red;
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
}

svg {
  position: fixed;
  z-index: 1;
  top:0;
  right: 0;
  height: 100%;
  width: auto;  

  
}


svg path {
  fill: rgba(255,255,255,0.5);backdrop-filter: blur(10px);
}