JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <defs> 
    <pattern id="rainbow" patternUnits="userSpaceOnUse" width="300" height="300"> 
      <image xlink:href="http://www.fnordware.com/superpng/pnggrad8rgb.png" 
        x="0" y="0" width="300" height="300">
      </image> 
    </pattern> 
  </defs> 
</svg>
<svg height="100%" width="100%" style="float:left" class="pattern-swatch">
  <rect style="fill: url(#rainbow) #fff;" x="0" y="0" height="100%" width="100%"></rect>
</svg>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}