JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
        <linearGradient id="grad" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
            <stop stop-color="#bada55" stop-opacity="0.1" offset="0%" />
            <stop stop-color="#bada55" stop-opacity="1" offset="100%" />
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#grad)" />
    </svg>
</div>

CSS

#container {
    position:absolute;
    height:50%;
    width:50%;
}
svg {
    position:absolute;
    height: 100%;
    width: 100%;
}