JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="50px" height="51px" viewBox="0 0 50 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="SVG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Panic-Logo">
            <path d="M6.705,38.637 L39.2,38.637 L42.811,12.364 L9.8,12.364 L6.705,38.637 L6.705,38.637 Z" id="Shape1" fill="#FFFFFF"></path>
            <path d="M42.321,12.471 C42.837,9.719 41.829,6.636 39.425,4.879 C36.969,3.084 33.787,3.02 31.317,4.455 C30.16,1.833 27.551,0.003 24.513,0.002 C21.476,2.45897053e-16 18.865,1.827 17.705,4.448 C15.237,3.01 12.055,3.07 9.596,4.864 C7.138,6.656 6.095,9.677 6.689,12.482 C3.851,12.777 1.313,14.705 0.373,17.608 C-0.568,20.51 0.355,23.571 2.476,25.489 C0.353,27.404 -0.573,30.464 0.365,33.367 C1.287,36.224 3.939,38.117 6.722,38.461 L11.638,12.471 L42.321,12.471 L42.321,12.471 Z" id="Shape2" fill="#41B9D1"></path>
            <path d="M46.9485332,25.04 C49.0705332,26.958 49.9925332,30.018 49.0525332,32.921 C48.1125332,35.824 45.5745332,37.752 42.7355332,38.047 C43.3305332,40.852 42.2865332,43.873 39.8285332,45.666 C37.3695332,47.458 34.1885332,47.519 31.7195332,46.082 C30.5605332,48.702 27.9495332,50.529 24.9115332,50.528 C21.8745332,50.526 19.2645332,48.696 18.1085332,46.075 C15.6375332,47.509 12.4555332,47.445 9.99953323,45.65 C7.57753323,43.88 6.60253323,40.76 7.14653323,37.99 L14.7975332,37.99 L15.9815332,31.73 L39.0145332,31.73 L42.7455332,12 C45.5125332,12.358 48.1425332,14.319 49.0605332,17.163 C49.9975332,20.066 49.0725332,23.126 46.9485332,25.04 L46.9485332,25.04 Z M17.3455332,25.002 L18.5295332,18.74 L33.7535332,18.74 L32.5695332,25.002 L17.3455332,25.002 L17.3455332,25.002 Z" id="Shape3" fill="#127093"></path>
        </g>
    </g>
</svg>

CSS

@-webkit-keyframes color_change {
	0% { fill: #41B9D1; }
	20% { fill: #9BFF1B; }
	40% { fill: #F27E18; }
	60% { fill: #FFD700; }
	80% { fill: #FF0066; }
	100% { fill: #41B9D1; }
}

@-webkit-keyframes color_change_2 {
	0% { fill: #127093; }
	20% { fill: #FF0066; }
	40% { fill: #FFD700; }
	60% { fill: #F27E18; }
	80% { fill: #9BFF1B; }
	100% { fill: #127093; }
}

@keyframes color_change {
	0% { fill: #41B9D1; }
	20% { fill: #9BFF1B; }
	40% { fill: #F27E18; }
	60% { fill: #FFD700; }
	80% { fill: #FF0066; }
	100% { fill: #41B9D1; }
}

@keyframes color_change_2 {
	0% { fill: #127093; }
	20% { fill: #FF0066; }
	40% { fill: #FFD700; }
	60% { fill: #F27E18; }
	80% { fill: #9BFF1B; }
	100% { fill: #127093; }
}

#Shape2 {
	-webkit-animation: color_change 10s infinite alternate;
	animation: color_change 10s infinite alternate;
}

#Shape3 {
	-webkit-animation: color_change_2 10s infinite alternate;
	animation: color_change_2 10s infinite alternate;
}