JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
      <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
      <p>This is the bar chart</p>
    </div>
    <div id="tabs-2">
      <p>This is the line chart</p>
     <div id="chart2" style="height:300px; width:650px;"></div>
   </div>    
    <div id="tabs-3">
      <p>This is the pie chart</p>
     <div id="chart3" style="height:300px; width:650px;"></div>
    </div>
</div>

JavaScript

$(document).ready(function(){

  var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];	
  var data1 = [3,1,2,3,5,4];
  var data2 = [4,3,3,4,5,6];
  var data3 = [9,10,8,7,4,6];
  var data4 = [9,8,7,12,9,10];
  var pie1 = [ 
    ['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
  ];


  
  var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});
  
  var plot3 = $.jqplot ('chart3', [pie1],{
  	 seriesDefaults: {
    	renderer: jQuery.jqplot.PieRenderer, 
		rendererOptions: {
			showDataLabels: true,
			dataLabels: 'value',
			fill: false,
		    sliceMargin: 6, 
		    lineWidth: 5
		}
  	}
  });


  $("#tabs").tabs();


});