JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<div id="gauges">
    <div id="onBreakGauge" style='background-color: "#fff"'></div>
    <div id="loggedInGauge" style='background-color: "#fff"'></div>
    <div id="loggedOutGauge" style='background-color: "#fff"'></div>
</div>

CSS

#gauges {
    position: relative;
    background-color: '#fff';
}
#loggedInGauge,  #onBreakGauge {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
}
#onBreakGauge{
  position: absolute !important
    z-index: 10;
    top: -8px;
    left: -15px;
    right: 0;
    bottom: 0;
    width: 230px;
    height: 235px;
}
#loggedOutGauge {
  position: absolute !important
    z-index: 10;
    top: 70px;
    left: 50px;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
}
#onBreakGauge {
    z-index: 0;
}
#loggedInGauge {
    z-index: 20010;
}

JavaScript

$("#onBreakGauge").kendoRadialGauge({
gaugeArea:{
background: '#fff'
},
    pointer: {
        // Current value
        value: 125
    },
    scale: 
    {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 35,
        rangeDistance: -10,
				rangePlaceholderColor: '#fff',
        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
        visible: false,
            size: 10
		},
		minorTicks:
		{
			visible: false
		},
        // Define min and max (0% - 100%)
        min: 0,
        max: 180,

        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0",
          visible: false
        },

        // Color ranges
        ranges: [
            {
                from: 0,
                to: 108,
                color: "#FF7D7D",
                opacity: 0
            }, 
            {
                from: 108,
                to: 120,
                color: "#FDE59A",
                opacity: 0
            },
            {
                from: 120,
                to: 132,
                color: "#91C896",
                opacity: 1
            },
            {
                from: 132,
                to: 144,
                color: "#FDE59A",
                opacity: 0
            },
            {
                from: 144,
                to: 180,
                color: "#FF7D7D",
                opacity: 0
            }
        ]
    }
});
$("#loggedInGauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 125
    },
    scale: 
    {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 10,
        rangeDistance:...