JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="215.069px" height="121.917px" viewBox="0 0 215.069 121.917" enable-background="new 0 0 215.069 121.917" xml:space="preserve">
    <rect width="215.1" height="121.9" class="style0" />
</svg>

CSS

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}
@-webkit-keyframes mymove {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        fill: #000000;
    }
    25% {
        -webkit-transform: rotate(90deg);
        fill: #78ab98;
    }
    50% {
        -webkit-transform: rotate(180deg);
        fill: #aa7454;
    }
    75% {
        -webkit-transform: rotate(270deg);
        fill: #123456;
    }
}
.style0 {
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
    fill: #231F20;
}