JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<svg width="330" height="265" viewBox="0 0 330 265" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply">
<path d="M-1 265H329.5L193.5 -0.499878H-1V265Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="194.673" y1="91.0746" x2="126.149" y2="-56.3377" gradientUnits="userSpaceOnUse">
<stop offset="0.000852008" stop-color="#0092B2"/>
<stop offset="0.359527" stop-color="#109AB8"/>
<stop offset="1" stop-color="#83D2E4"/>
</linearGradient>
</defs>
</svg>

CSS

body {
  background: url(http://dev-vm-institute.pantheonsite.io/wp-content/uploads/2019/08/photo-hero-home.png) no-repeat;
  background-size:cover;
  padding:0;
  margin:0;
}