JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
	<g class="l1">
		<circle fill="#231F20" cx="200" cy="200" r="200"/>
		<rect x="87.825" y="43.737" fill="#DBB6C2" width="55.79" height="55.79"/>
	</g>
	<g class="l2">
		<circle fill="#7F384D" cx="200" cy="200" r="100"/>
		<rect x="159.825" y="158.298" fill="#DBB6C2" width="80.351" height="80.351"/>
	</g>
	</svg>

JavaScript

$('.l1, .l2').mouseover(function() {
    $(this).css('opacity','.5');
});
$('.l1, .l2').mouseout(function() {
    $(this).css('opacity','1');
});