JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<html>
    <body>
       <svg>
          <linearGradient id="grad1">
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0">
              <animate attributeName="offset" begin="0s" dur="2s" values="0;1;0" repeatCount="indefinite" />
              </stop>
      <stop
         style="stop-color:#FF0000;stop-opacity:1;"
              offset="1" />
    </linearGradient>
                     <linearGradient id="grad2">
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0" />
      <stop
         style="stop-color:#0000FF;stop-opacity:1;"
              offset="1" />
    </linearGradient>
      <rect
         ry="0"
         y="100"
         x="100"
         height="40"
         width="80"/>
        </svg>
    </body>
</html>

SCSS

rect {
    -moz-transition: fill .8s;
    fill: url(#grad1);
    &:hover {
        fill: url(#grad2);
}
}