JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<body>
	<div id="inset">
		<div id="inset2">
			<svg id="svg" width="100%" height="100%"></svg>
		</div>
	</div>
</body>

CSS

body, html {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}

#inset {
 width: 20%;
 height: 50%;
 position: absolute;
 bottom: 0;
 left: 50%;
}

#inset2 {
 width: 80%;
 height: 100%;
}

JavaScript

$(function() {

	var sponsorBubble = function(el, html, cornerRad) {
		this.html = html,
		this.width = el.parent().width(),
		this.height = el.parent().height(),
		this.arrowWidth = el.parent().width()/4,
		this.arrowHeight = el.parent().height()/8,
		this.cornerRad = cornerRad;
		
			
		//ENSURE SAME NUMBER OF PATH SEGMENTS IN ALL KEYFRAMES (START TO END)
		this.keypaths = [];
		
		this.keypaths[0] = [
			"M",
			(this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"Q",
			(this.width/2) - (this.arrowWidth/2), this.height - this.arrowHeight,
			(this.width/2), this.height - this.arrowHeight,
			"L",
			(this.width/2), this.height - this.arrowHeight,
			"Q",
			(this.width/2) + (this.arrowWidth/2), this.height - this.arrowHeight,
			(this.width/2) + (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"L",
			(this.width/2) + (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"Q",
			(this.width/2) + (this.arrowWidth/2), this.height,
			(this.width/2), this.height,
			"L",
			(this.width/2), this.height,
			"Q",
			(this.width/2) - (this.arrowWidth/2), this.height,
			(this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"L",
			(this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"L",
			(this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"L",
			(this.width/2) - (this.arrowWidth/2), this.height - (this.arrowHeight/2),
			"Z"
		];
		
		this.keypaths[1] = [
			"M", //STARTS AT BOTTOM LEFT, GOING CLOCKWISE
			this.cornerRad, this.height-this.arrowHeight,
			"Q",
			0, this.height-this.arrowHeight,
			0, this.height-this.arrowHeight-this.cornerRad,
			"L",
			0, this.cornerRad,
			"Q",
			0,0,
			this.cornerRad, 0,
			"L",
			this.cornerRad+(this.width - (this.cornerRad*2)), 0,
			"Q",
			this.width, 0,
			this.width, this.cornerRad,
			"L",
			this.width, this.cornerRad+(this.height-this.arrowHeight-(this.cornerRad*2)),
			"Q",
			this.width,...