JSFiddle - React, Tailwind, and code Playground

by clauswilke

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
  <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#202020"/>
        <stop offset="20%" stop-color="black"/>
        <stop offset="80%" stop-color="black"/>
        <stop offset="100%" stop-color="#202020"/>
      </linearGradient>
   <mask id="gradient-mask">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)"/>
  </mask>
   <rect x="150" width="500" height="500" fill="#051040"/>
   <rect width="400" height="400" fill="#ffffff" mask="url(#gradient-mask)" fill-opacity="1" />
   <rect x="500" width="500" height="200" fill="url(#gradient)"/>
</svg>