JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div class="row">
  <div class="col" id="chartContainer1"></div>
  <div class="col" id="chartContainer2"></div>
</div>
<div class="row">
  <div class="col" id="chartContainer3"></div>
  <div class="col" id="chartContainer4"></div>
</div>

CSS

.row:after {
    content: "";
    display: table;
    clear: both;
  }
  .col {
    float: left;
    width: 50%;
    height: 270px;
  }

JavaScript

window.onload = function () {
  var charts = []; 
  var chartOptions1 = {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    title:{
      text: "1st Chart"
    },
    data: [{
      type: "splineArea", 
      dataPoints: [
	      { x: 1966 , y: 0.020},
        { x: 1967 , y: 0.025},
        { x: 1968 , y: 0.030},
        { x: 1969 , y: 0.050},
        { x: 1970 , y: 0.060},
        { x: 1971 , y: 0.070},
        { x: 1972 , y: 0.080},
        { x: 1973 , y: 0.050},
        { x: 1974 , y: 0.040},
        { x: 1975 , y: 0.020},
        { x: 1976 , y: 0.060},
        { x: 1977 , y: 0.060},
        { x: 1978 , y: 0.010},
        { x: 1979 , y: 0.030},
        { x: 1980 , y: 0.050},
        { x: 1981 , y: 0.010}
      ]
    }]
  };
  var chartOptions2 = {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    title:{
      text: "2nd Chart"
    },
    data: [{
      type: "splineArea", 
      dataPoints: [
	      { x: 1966 , y: 0.020},
        { x: 1967 , y: 0.025},
        { x: 1968 , y: 0.030},
        { x: 1969 , y: 0.050},
        { x: 1970 , y: 0.060},
        { x: 1971 , y: 0.070},
        { x: 1972 , y: 0.080},
        { x: 1973 , y: 0.050},
        { x: 1974 , y: 0.040},
        { x: 1975 , y: 0.020},
        { x: 1976 , y: 0.060},
        { x: 1977 , y: 0.060},
        { x: 1978 , y: 0.010},
        { x: 1979 , y: 0.030},
        { x: 1980 , y: 0.050},
        { x: 1981 , y: 0.010}
      ]
    }]
  };
  var chartOptions3 = {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    title:{
      text: "3rd Chart"
    },
    data: [{
      type: "splineArea", 
      dataPoints: [
	      { x: 1966 , y: 0.020},
        { x: 1967 , y: 0.025},
        { x: 1968 , y: 0.030},
        { x: 1969 , y: 0.050},
        { x: 1970 , y: 0.060},
        { x: 1971 , y: 0.070},
        { x: 1972 , y: 0.080},
        { x: 1973 , y: 0.050},
        { x: 1974 , y:...