JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="charts-container"></div>

CSS

/************************
	Green: #c1d72e
	Blue: #58b7e0
	Orange: #f47521
	Gray: #939598
**********************/
 .green {
    color: #c1d72e;
}
.blue {
    color: #58b7e0;
}
.orange {
    color: #f47521;
}
.gray {
    color: #939598;
}
#charts-container {
    font-family:'Montserrat';
    float: left;
    width: 100%!important;
    height: 300px;
    margin: 0 0;
    background: url('../images/alt_logo.png') center center / 100% 100% no-repeat;
}
#charts-container a {
    color: #fff;
    font-family:'Montserrat';
}
.data-wrap {
    font-family:'Montserrat';
    float: left;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}
.data-wrap a {
    font-family:'Montserrat';
    float: left;
    width: 100%;
    margin-top: 0px;
}
.extra-data {
    padding: 0px;
    width: 100%;
    display: block;
    float: left;
}
/* individual content styles */
 .brand h1 {
    border-bottom: 1px #58b7e0 solid;
}
.media h1 {
    border-bottom: 1px #f47521 solid;
}
.retail h1 {
    border-bottom: 1px #939598 solid;
}
.datalabel1 {
    transform: rotate(0deg);
    /* Safari */
    -webkit-transform: rotate(0deg);
    /* Firefox */
    -moz-transform: rotate(0deg);
    /* IE */
    -ms-transform: rotate(0deg);
    /* Opera */
    -o-transform: rotate(0deg);
}
.datalabel2 {
    transform: rotate(-60deg);
    /* Safari */
    -webkit-transform: rotate(-60deg);
    /* Firefox */
    -moz-transform: rotate(-60deg);
    /* IE */
    -ms-transform: rotate(-60deg);
    /* Opera */
    -o-transform: rotate(-60deg);
}
.datalabel3 {
    transform: rotate(60deg);
    /* Safari */
    -webkit-transform: rotate(60deg);
    /* Firefox */
    -moz-transform: rotate(60deg);
    /* IE */
    -ms-transform: rotate(60deg);
    /* Opera */
    -o-transform: rotate(60deg);
}
.datalabel1, .datalabel2, .datalabel3 {
    font-size: 11px;
    cursor: pointer;
}
.datalabel1 {
    margin-top: 0px;
    margin-left: 0px;
}
.datalabel2 {
    margin-top: -3px;
    margin-left: -5px;
}
.datalabel3 {
 ...

JavaScript

var chart;

	(function(H) {
       	H.wrap(H.Chart.prototype.initReflow = function () {
            var chart = this,
                reflow = function (e) {
                    if(chart && chart.options) {
                    	chart.reflow(e);
                    }
                };


            H.addEvent(window, 'resize', reflow);
            H.addEvent(chart, 'destroy', function () {
                H.removeEvent(window, 'resize', reflow);
            });
        });
    })(Highcharts)

	function callback(target3) {
		      setTimeout(function() {
		        jQuery( target3 ).removeClass( "currentItem-data" );
		        jQuery( target3 ).removeClass( "currentItem-projects" );
		      }, 100 );
	}
	function showinfo( target, target2 ) {
		//set function to remove currentItem class once animation is complete
		jQuery(target).addClass("currentItem-data", 1000, callback(target))
		jQuery(target2).addClass("currentItem-projects", 1000, callback(target2));
		//hide all divs
		jQuery(".extra-data").css({'display':'none'});
		// and only show currentItem
		jQuery(".currentItem-data").show('slow'); 
		jQuery(".currentItem-projects").css({'display':'block'});
		jQuery(".svg-icon-holder").css('visibility', 'visible');
	};
	//create the chart
	function createChart() {
        chart = new Highcharts.Chart(options);
	};
	jQuery.noConflict();
	//remove current item classes once 
	
	//set initial colors for chart
	var COLORS1 = ['#c1d72e', '#c1d72e', '#c1d72e'];
	var COLORS2 = ['#58b7e0', '#58b7e0', '#58b7e0', '#58b7e0', '#f47521','#f47521','#f47521','#939598','#939598','#939598','#939598','#939598'];
	var counter = 1;
	// Create chart options
	var options = {
	    title: {
	        text: null
	        // text: null // as an alternative
	    },
	    subtitle: {
	        text: null
	        // text: null // as an alternative
	    },
	    chart: {
	        renderTo: 'charts-container',
	        type: 'pie',
	        backgroundColor: 'transparent',
	        spacing: [0, 0, 0,...