JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450">
    <defs>
        <linearGradient id="grad1" gradientTransform="rotate(45)">
            <stop offset="0" stop-color="#0f0" />
            <stop offset="1" stop-color="#000" />
        </linearGradient>
        <linearGradient id="grad2" gradientTransform="  rotate(45)">
            <stop offset="0" stop-color="#0f0" />
            <stop offset="1" stop-color="#000" />
        </linearGradient>
        <linearGradient id="grad3" gradientTransform="rotate(45)  ">
            <stop offset="0" stop-color="#0f0" />
            <stop offset="1" stop-color="#000" />
        </linearGradient>
        <linearGradient id="grad4" gradientTransform="  rotate(45)  ">
            <stop offset="0" stop-color="#0f0" />
            <stop offset="1" stop-color="#000" />
        </linearGradient>
        <linearGradient id="grad5" gradientTransform="  rotate(45)fnord">
            <stop offset="0" stop-color="#0f0" />
            <stop offset="1" stop-color="#000" />
        </linearGradient>
    </defs>
    <rect x="10" y="10" width="80" height="100" fill="url(#grad1)" />
    <rect x="100" y="10" width="80" height="100" fill="url(#grad2)" />
    <rect x="190" y="10" width="80" height="100" fill="url(#grad3)" />
    <rect x="280" y="10" width="80" height="100" fill="url(#grad4)" />
    <rect x="370" y="10" width="80" height="100" fill="url(#grad5)" />
</svg>