JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<svg viewBox="0 0 1440 720" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#242A38" offset="0%"></stop>
            <stop stop-color="#1A202D" offset="100%"></stop>
        </linearGradient>
        <rect id="path-2" x="0" y="0" width="1440" height="720"></rect>
        <linearGradient x1="-2.48949813e-15%" y1="50%" x2="100%" y2="50%" id="linearGradient-4">
            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0.02" offset="50%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Masthead">
            <g id="Background">
                <g>
                    <mask id="mask-3" fill="white">
                        <use xlink:href="#path-2"></use>
                    </mask>
                    <use id="Mask" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
                    <polygon id="Rectangle-3" fill="url(#linearGradient-4)" mask="url(#mask-3)" points="0 0 1440 0 1015.491 212.254502 0 720"></polygon>
                    <polygon id="Rectangle-3" fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(720.000000, 180.000000) scale(-1, 1) translate(-720.000000, -180.000000) " points="0 0 1440 0 0 360"></polygon>
                </g>
            </g>
        </g>
    </g>
</svg>

CSS

body {
  background-color: #1A202D;
}