JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
   {
  "backgroundColor": "",
  "zoomEnabled": false,
  "zoomType": "xy",
  "animationEnabled": true,
  "title": {
    "text": "Pressure Profile",
    "fontWeight": "lighter",
    "fontColor": "#333",
    "fontfamily": "Arimo",
    "fontSize": 12,
    "padding": 10,
    "verticalAlign": "top",
    "horizontalAlign": "center"
  },
  "toolTip": {
    "shared": false,
    "enabled": false
  },
  "legend": {
    "fontfamily": "Arimo",
    "fontSize": 12,
    "horizontalAlign": "left",
    "verticalAlign": "bottom"
  },
  "axisX": {
    "logarithmic": false,
    "title": "Stage Number",
    "titleFontFamily": "Arimo",
    "titleFontSize": 12,
    "titleFontColor": "black",
    "titleFontWeight": "normal",
    "titleFontStyle": "normal",
    "labelAngle": 0,
    "labelFontFamily": "Arimo",
    "labelFontColor": "black",
    "labelFontSize": 10,
    "labelFontWeight": "normal",
    "labelFontStyle": "normal",
    "labelAutoFit": true,
    "labelWrap": true,
    "tickColor": "White",
    "tickThickness": 1,
    "lineColor": "gray",
    "lineThickness": 1,
    "valueFormatString": "",
    "gridColor": "rgb(217, 217, 217)",
    "gridThickness": 0,
    "interlacedColor": "",
    "stripLines": [],
    "tickLength": 5
  },
  "axisY": {
    "title": "Pressure",
    "titleFontFamily": "Arimo",
    "titleFontSize": 15,
    "titleFontColor": "black",
    "titleFontWeight": "normal",
    "titleFontStyle": "normal",
    "labelAngle": 0,
    "labelFontFamily": "Arimo",
    "labelFontColor": "black",
    "labelFontSize": 10,
    "labelFontWeight": "normal",
    "labelFontStyle": "normal",
    "labelAutoFit": true,
    "labelWrap": false,
    "tickColor": "black",
    "tickThickness": 1,
    "lineColor": "rgb(187,187,187)",
    "lineThickness": 1,
    "valueFormatString": "#,##0.##",
    "prefix": "",
    "interval": 0,
   ...