JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle-wrapper">
					<div class="circle-div">
						<div id="circles">
								<circle id="one" cx="125" cy="125" r="100" fill="#ce7b91" data-effect="deep-space-sparkle"/>
								<text x="50%" y="50%"  dy=".3em">1</text>
								Sorry, your browser does not support inline SVG.
							<svg width="250" height="250">
								<circle id="two" cx="125" cy="125" r="100" fill="#9bc53d" data-effect="chinese-violet"/>
								<text x="50%" y="50%" dy=".3em">2</text>
								Sorry, your browser does not support inline SVG.
							</svg>
							<svg width="250" height="250">
								<circle id="three" cx="125" cy="125" r="100" fill="#33a1fd" data-effect="mellow-yellow"/>
								<text x="50%" y="50%" dy=".3em">3</text>
								Sorry, your browser does not support inline SVG.
							</svg>
							<svg width="250" height="250">
								<circle id="four" cx="125" cy="125" r="100" fill="#d96c06" data-effect="blanched-almond"/>
								<text x="50%" y="50%" dy=".3em">4</text>
								Sorry, your browser does not support inline SVG.
							</svg>
							<svg width="250" height="250">
								<circle id="five" cx="125" cy="125" r="100" fill="#1f1300" data-effect="gainsboro"/>
								<text x="50%" y="50%" dy=".3em">5</text>
								Sorry, your browser does not support inline SVG.
							</svg>
							<svg width="250" height="250">
								<circle id="six" cx="125" cy="125" r="100" fill="#af9b46" data-effect="mauve"/>
								<text x="50%" y="50%" 	dy=".3em">6</text>
								Sorry, your browser does not support inline SVG.
							</svg>
						</div>
					</div>
				</div>

CSS

svg text {
	text-anchor: middle;
	fill: #ffffff;
	font-size: 75px;
}

.deep-space-sparkle {
	fill: #4A6C6F;
}

.chinese-violet {
	fill: #846075;
}

.mellow-yellow {
	fill: #F9DF74;
}

.blanched-almond {
	fill: #F9EDCC;
}

.gainsboro {
	fill: #DBDBDB;
}

.mauve {
	fill: #E4C1F9;
}

JavaScript

jQuery(function ($) {
    $(document).on('click','circle',function(){
        $(this).toggleClass($(this).attr('data-effect'));
    });
});