JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Circle Gauge</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript" src="https://unpkg.com/realchart/gauge.js"></script>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
</script>

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	

		 </body></html>

JavaScript

const config = {
  templates: {
    gauge: {
      width: '33%',
      height: '50%',
      innerRadius: '93%',
      valueRim: {
        ranges: [{
          toValue: 25,
          color: 'green'
        }, {
          toValue: 50,
          color: '#0000cc'
        }, {
          toValue: 75,
          color: '#ffaa00'
        }, {
          color: 'red'
        }]
      },
      label: {
        text: '<t style="fill:blue">${value}</t><t style="font-size:12px;"> </t><t style="font-size:20px;">%</t><br><t style="font-size:20px;font-weight:normal">Gauge Test</t>',
        style: {
          fontWeight: 'bold'
        }
      }
    }
  },
  title: 'Multiple Gauges',
  gauge: [{
    template: 'gauge',
    name: 'gauge1',
    left: 0,
    top: 0,
    value: Math.random() * 100
  }, {
    template: 'gauge',
    name: 'gauge2',
    left: '33%',
    top: 0,
    valueRim: {
      thickness: '200%'
    },
    value: Math.random() * 100
  }, {
    template: 'gauge',
    name: 'gauge3',
    left: '66%',
    top: 0,
    value: Math.random() * 100
  }, {
    template: 'gauge',
    name: 'gauge4',
    left: 0,
    top: '50%',
    value: Math.random() * 100,
    innerRadius: '85%',
    valueRim: {
      stroked: true,
      style: {
        strokeLinecap: 'round'
      }
    },
    backgroundStyle: {
      stroke: 'lightblue',
      strokeWidth: '2px',
      borderRadius: '10px'
    }
  }, {
    template: 'gauge',
    name: 'gauge5',
    left: '33%',
    top: '50%',
    value: Math.random() * 100,
    innerRadius: '75%',
    valueRim: {
      stroked: true,
      style: {
        strokeDasharray: '3'
      }
    },
    label: {
      style: {
        fontSize: '30px'
      }
    }
  }, {
    template: 'gauge',
    name: 'gauge6',
    left: '66%',
    top: '50%',
    value: Math.random() * 100,
    innerStyle: {
      fill: '#003300',
      stroke: 'white',
      strokeWidth: '5px'
    },
    label: {
      text: '<t style="fill:yellow">${value}</t><t style="font-size:12px;">...