JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="640px" viewBox="0 0 500 640" xml:space="preserve">
       
   <!--Static SVG Element with Color-->     
<!-- 
<circle id="circle1" cx="200" cy="70" r="55"></circle>
<circle id="circle2" cx="300" cy="50" r="85"></circle>
<rect id="red" x="10" y="115" width="270" height="170" /> 
-->
       
    <!--Scale Animation-->    
<rect id="translated" x="50" y="30" width="100" height="100"></rect>
 <!--Scale Animation-->       
       
       <!--Moving Element Animation-->
<!--
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
<circle width="100px" height="100px">
<animate attributeName="r" from="0" to="100" dur="3s"/> </circle> 
-->
<rect x="100" y="100" width="200" height="200" fill="slategrey">
<animate attributeName="width" from="0" to="200" begin= "0s" dur="5s"/>
</rect>
</rect>
</svg>

CSS

#circle2{ fill:#169133;}
#circle1{fill:#169133;}
#red{fill:#ef8913;}
#translated
{
 fill: hsl(204, 70%, 23%);
    animation-name: glow-blue;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
@keyframes glow-blue {
    0% { fill: hsl(204, 80%, 23%); }
    100% { fill: hsl(204, 80%, 63%); }
}
-moz-@keyframes glow-blue {
    0% { fill: hsl(204, 80%, 23%); }
    100% { fill: hsl(204, 80%, 63%); }
}
-webkit-@keyframes glow-blue {
    0% { fill: hsl(204, 80%, 23%); }
    100% { fill: hsl(204, 80%, 63%); }
}
rect{
  width: 500px !important;
}