JSFiddle - React, Tailwind, and code Playground

by Leo Lanese

HTML

<svg xmlns="http://www.w3.org/2000/svg">
  <title>Corner-to-corner gradient</title>
  <defs>
    <linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop style="stop-color: #A901B5;" offset="0"/>
      <stop style="stop-color: #050017;" offset="1"/>
    </linearGradient>
  </defs>
  <rect style="fill: url(#g);" width="100%" height="100%"/>
</svg>

CSS

* {
    margin:0;padding:0;
    background-size: auto auto;
}

JavaScript

/*
code borrowed from Mozilla demos:
https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
*/