JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper>"<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="553px"
	 height="553px" viewBox="0 0 553 553" enable-background="new 0 0 553 553" xml:space="preserve">

<style>
  rect:hover
  {
    opacity: 0.5;

  }
</style>


		<rect onmouseover="rect('opacity', '0.5');" x="277" y="126" fill="#960B2C" width="156" height="88"/>
		<rect x="120" y="126" fill="#004D44" width="157" height="88"/>
	
		<rect x="277" y="232" fill="#960B2C" width="156" height="88"/>
		<rect x="120" y="232" fill="#004D44" width="157" height="88"/>

		<rect x="277" y="339" fill="#960B2C" width="156" height="88"/>
		<rect x="120" y="339" fill="#004D44" width="157" height="88"/>

</svg>
</div>