JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-275.4 -117 1537.4 432" style="enable-background:new -275.4 -117 1537.4 432;" xml:space="preserve">

<g id="branche">
	<path class="st0" d="M498.4,279.3c-2.8,0-4.4-0.6-5.7-3.4c-2.8-5.7-7.7-8.7-14.1-8.6c-6.2,0.1-11,3.1-13.6,8.6
		c-1.3,2.7-2.8,3.4-5.6,3.4c-23.7-0.1-47.3-0.1-71,0c-2.8,0-4.4-0.6-5.7-3.4c-2.7-5.7-7.6-8.7-14-8.6c-6.2,0-10.9,3-13.6,8.5
		c-1.3,2.7-2.8,3.5-5.6,3.5c-23.7-0.1-47.3-0.1-71,0c-2.7,0-4.4-0.4-5.7-3.3c-2.7-5.8-7.6-8.7-14-8.7c-6.2,0-10.9,3-13.6,8.5
		c-1.3,2.6-2.7,3.5-5.6,3.5c-23.7-0.1-47.3-0.1-71,0c-3.1,0-4.5-1-5.9-3.8c-2.7-5.5-7.6-8.4-13.8-8.3c-6.2,0.1-11,3-13.6,8.5
		c-1.4,3-3.2,3.5-6.1,3.5c-18.8-0.1-37.5-0.1-56.3-0.1c0,0.3,0.1,0.6,0.1,0.9v6c0,0.4,0,0.7-0.1,1c0,0.1,0,0.2,0,0.2
		c18.7,0,37.4,0,56.2,0c3.1,0,4.8,0.6,6.4,3.8c2.7,5.4,7.6,8.3,13.8,8.2c6.2-0.1,10.9-3.1,13.7-8.5c1.3-2.6,2.6-3.6,5.5-3.6
		c23.8,0.1,47.6,0.1,71.4,0c2.7,0,4.1,0.8,5.3,3.3c2.8,5.7,7.6,8.8,14,8.8c6.2,0,11-3,13.7-8.4c1.4-2.9,3-3.6,6-3.6
		c23.4,0.1,46.9,0.1,70.4,0c3,0,4.6,0.7,6,3.6c2.7,5.4,7.5,8.4,13.7,8.4s11.1-2.8,13.7-8.3c1.6-3.3,3.4-3.7,6.5-3.7
		c23.3,0.1,46.6,0.1,69.9,0c2.9,0,4.7,0.5,6.1,3.5c2.6,5.5,7.4,8.4,13.6,8.5c6.2,0.1,11.1-2.8,13.8-8.2c1.5-3.2,3.3-3.8,6.4-3.8
		c27.3,0.1,54.6,0.1,81.9,0.1v-8C553.4,279.3,525.9,279.2,498.4,279.3z M148.8,291c-4.3-0.1-7.8-3.9-7.7-8.2
		c0.1-4.3,3.9-7.8,8.2-7.7c4.2,0.2,7.8,4,7.7,8.2C156.9,287.6,153.1,291.1,148.8,291z M259.2,291c-4.3,0.1-8-3.5-8.1-7.8
		c-0.1-4.3,3.5-8,7.8-8.1c4.3-0.1,8,3.5,8.1,7.8C267.1,287.2,263.5,290.9,259.2,291z M369.1,291c-4.3,0.1-8-3.6-8-7.9
		c0-4.3,3.6-8,7.9-8s8,3.6,8,7.9S373.4,291,369.1,291z M479.2,291c-4.3,0.1-8-3.5-8.1-7.8c-0.1-4.3,3.5-8,7.8-8.1
		c4.3-0.1,8,3.5,8.1,7.8C487,287.2,483.4,291,479.2,291z"/>
	<path class="st1" d="M149.3,275.1c4.3,0.1,7.8,3.9,7.7,8.2c-0.1,4.3-3.9,7.8-8.2,7.7s-7.8-3.9-7.7-8.2
		C141.2,278.6,145,275,149.3,275.1z"/>
	<path class="st1"...

CSS

.st0{fill:#3F82C6;}
	.st1{fill:#F6F9FC;}
	.st2{fill:#FFFFFF;}
	.st3{fill:#FF8E6E;}
	.st4{fill:#004C7C;}
	.st5{fill:#015D97;}
	.st6{fill:#E4E4E4;}
	.st7{fill:#F2F2F2;}
	.st8{fill:#486380;}
	.st9{fill:none;}
	.st10{font-family:'robotolight';}
	.st11{font-size:23px;}
	.st12{fill:#EF8D6F;}
	.st13{fill:#AFAFAF;}
	.st14{fill:#FABB18;}
	.st15{fill:#EFCB6C;}
	.st16{fill:#C9675B;}
	.st17{fill:#E8CF13;}
	.st18{fill:#DDB40A;}
	.st19{fill:#F3C80A;}
	.st20{fill:#F2DB0C;}
	.st21{fill:#F3F4F8;}
	.st22{fill:#3F82C6;stroke:#224563;stroke-width:0.5;stroke-miterlimit:10;}
	.st23{fill:#224563;stroke:#224563;stroke-width:0.5;stroke-miterlimit:10;}
	.st24{fill:none;stroke:#3F82C6;stroke-width:8;stroke-miterlimit:10;}
	#rectangle1, #rectangle2, #rectangle3{
  		perspective: 1500px;
	}
	#rectangle1.flip .card, #rectangle2.flip .card, #rectangle3.flip .card {
		transform: rotateX(180deg);
	}
	#rectangle1 .card, #rectangle2 .card, #rectangle3 .card{
		transform-style:preserve-3d;
		transition:1s;
	}
	#rectangle1 .face, #rectangle2 .face, #rectangle3 .face{
		backface-visibility: hidden;
	}
	#rectangle1 #front1{
		transform: rotateX(0deg);
	}
	#rectangle1 #back1{
		transform: rotateX( 180deg );
	}
	#rectangle2 #front2{
		transform: rotateX(0deg);
	}
	#rectangle2 #back2{
		transform: rotateX( 180deg );
	}
	#rectangle3 #front3{
		transform: rotateX(0deg);
	}
	#rectangle3 #back3{
		transform: rotateX( 180deg );
	}
	#rectangle1.flipped, #rectangle2.flipped, #rectangle3.flipped {
	  	transform: rotateX( 180deg );
	}

JavaScript

$("#rectangle1").hover(function(){
    $(this).toggleClass("flip");
});
$("#rectangle2").hover(function(){
    $(this).toggleClass("flip");
});
$("#rectangle3").hover(function(){
    $(this).toggleClass("flip");
});