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>Linear 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 = {
  title: 'Linear Gauges',
  gauge: [{
    type: 'linear',
    name: 'linear1',
    width: '60%',
    height: 85,
    top: 100,
    value: 81,
    valueBar: {
      style: {
        fill: 'blue'
      }
    },
    scale: {
      line: true
    },
    band: {
      visible: true,
      gap: 3,
      ranges: [{
        toValue: 30,
        color: '#ff0'
      }, {
        toValue: 60,
        color: '#fa0'
      }, {
        color: '#f40'
      }]
    },
    label: {
      text: 'RealChart Linear<br>ver 1.0',
      style: {
        fill: 'red'
      }
    }
  }, {
    type: 'linear',
    name: 'linear2',
    width: '50%',
    height: 100,
    top: 250,
    value: 81,
    valueBar: {
      styleCallback: args => {
        if (args.value < 40) return {
          fill: 'red'
        };else if (args.value < 60) return {
          fill: 'yellow'
        };
      }
    },
    scale: {
      line: true
    },
    ranges: [{
      toValue: 50,
      color: '#777'
    }, {
      toValue: 70,
      color: '#aaa'
    }],
    label: {
      position: 'top',
      text: 'RealChart Linear ver 1.0'
    },
    backgroundStyle: {
      stroke: 'lightblue'
    }
  }]
};
let animate = false;
let chart;
function init() {
  chart = RealChart.createChart(document, 'realchart', config);
}