JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="grad1" x1="0" y1="0" x2="0.5" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="40%" stop-color="green" stop-opacity="1"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <linearGradient id="grad2">
        <stop offset="0%" class="lg1"/>
        <stop offset="100%" class="lg2"/>
      </linearGradient>
      <linearGradient id="grad3">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="green"/>
        <stop offset="50%" stop-color="yellow"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <radialGradient id="rgrad1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="green"/>
      </radialGradient>
      <radialGradient id="rgrad2" cx="0.3" cy="0.8" r="0.3">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="green"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" width="100" height="100"/>
  <rect id="rect2" x="120" y="10" width="100" height="100"/>
  <rect id="rect3" x="230" y="10" width="100" height="100"/>
  <rect id="rect4" x="10" y="120" width="100" height="100"/>
  <rect id="rect5" x="120" y="120" width="100" height="100"/>
</svg>

CSS

#rect1 { fill: url(#grad1); rx: 15; ry: 15; }
#rect2 { fill: url(#grad2); }
#rect3 { fill: url(#grad3); }
#rect4 { fill: url(#rgrad1); }
#rect5 { fill: url(#rgrad2); }
.lg1 { stop-color: red; }
.lg2 { stop-color: green; stop-opacity: 0.5; }