JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<svg version="1.1" id="graphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
    <rect id="red" x="300.5" y="-515.5" stroke="#FFFFFF" stroke-miterlimit="10" width="270" fill="red" height="2em" transform="scale(1,-1)"/>
    <rect id="blue" x="500.5" y="515.5" stroke="#eeeeee" stroke-miterlimit="10" width="270" fill="blue" height="270" />
</svg>

CSS

#graphic {
    width: 500px;
    height: 500px;
}
#red {
    font-size: 200px;
}
#red:hover {
    
      -webkit-animation: scaleheight 1s ease-in-out infinite alternate;

}



 @-webkit-keyframes scaleheight {
        0% {
            fill:red;
        }
             100% {
            fill:blue;
           			font-size: 300px;


        }
    }