JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<div id="divWheel" data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-navangle='0' data-wheelnav-colors="#338d9e, #225e69, #338d9e, #225e69, #338d9e,#225e69,#338d9e,#225e69"
		data-wheelnav-cssmode></div>

CSS

#divWheel {
			height: 400px;
			width: 400px;
			margin: auto;
		}
		
		#divWheel>svg {
			height: 100%;
			width: 100%;
		}
		
		@media (max-width: 600px) {
			#divWheel {
				height: 350px;
				width: 350px;
			}
		}
		
		@media (max-width: 400px) {
			#divWheel {
				height: 300px;
				width: 300px;
			}
		}
		/* Insert generated CSS code from here -> http://pmg.softwaretailoring.net */
		
		[class|=wheelnav-divWheel-slice-basic] {
			fill: rgba(51, 141, 158, 1);
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
		}
		
		[class|=wheelnav-divWheel-slice-dark] {
			fill: rgb(34, 94, 105);
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
		}
		
		[class|=wheelnav-divWheel-slice-selected] {}
		
		[class|=wheelnav-divWheel-slice-hover] {
			fill: #2b807d;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
			fill-opacity: 0.77;
			cursor: pointer;
		}
		
		[class|=wheelnav-divWheel-title-basic] {
			fill: white;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
		}
		
		[class|=wheelnav-divWheel-title-selected] {
			fill: #fff;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
		}
		
		[class|=wheelnav-divWheel-title-hover] {
			fill: #222;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
			cursor: pointer;
		}
		
		[class|=wheelnav-divWheel-title] > tspan {
			font-family: fontb;
			color: white;
			font-size: 14px;
		}
		
		.wheelnav-divWheel-spreader-in {
			fill: #2c889a;
            stroke:none;
		}
		
		.wheelnav-divWheel-spreadertitle-in {
            fill:white;
        }
		
		.wheelnav-divWheel-spreader-out {
			fill: #2c889a;
            stroke: none;
            stroke-width: .25em;
		}
		
		.wheelnav-divWheel-spreadertitle-out {
            fill:white;
            text-align:right!important;
        }
		
		.wheelnav-divWheel-slice-basic-0,
		.wheelnav-divWheel-slice-selected-0 {
			fill: #074961;
			stroke: none;
		}
		
		.wheelnav-divWheel-slice-basic-1,
		.wheelnav-divWheel-slice-selected-1 {
			fill: #2c889a;
			stroke:...

JavaScript

var CircleEdgeSlice = function (helper, percent, custom) {

		var custom = new slicePathCustomization();
		custom.titleRadiusPercent = 0.7;
    helper.setBaseValue(percent, custom);

    slicePathString = [];

    slicePathString.push(helper.MoveToCenter());
    slicePathString.push(helper.LineTo(helper.startAngle+5, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.middleAngle-10, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(30, helper.middleAngle+10, helper.sliceRadius));
    slicePathString.push(helper.ArcTo(helper.sliceRadius, helper.endAngle-5, helper.sliceRadius));
    slicePathString.push(helper.Close());

    return {
        slicePathString: slicePathString,
        linePathString: "",
        titlePosX: helper.titlePosX,
        titlePosY: helper.titlePosY
    };
};

  var wheel = new wheelnav("divWheel");
  wheel.cssMode = true;
  wheel.wheelRadius = wheel.wheelRadius * 0.9;
  wheel.titleRotateAngle = 90;
  wheel.animatetime = 500;
  wheel.animateeffect = 'linear';
  wheel.spreaderEnable = true;
  wheel.spreaderRadius = 80;
  wheel.spreaderInTitle = "content"
  wheel.spreaderOutTitle = "content"
  wheel.spreaderTitleFont = "500 14px Impact, Charcoal, sans-serif";
  wheel.slicePathFunction = CircleEdgeSlice;
  var arr = ["Content","Content","Content","Content","Content","Content","Content"];
  wheel.createWheel(arr);