JSFiddle - React, Tailwind, and code Playground

by tronne

HTML

<script src="http://nutriapp.tk/tests/Chart.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" class="jqm-demos" data-quicklinks="true">
	<div data-demo-html="true">
		<div data-role="tabs">
			<div data-role="navbar">
				<ul>
			      <li><a href="#one" data-theme="a" data-ajax="false">one</a></li>
			      <li><a href="#two" data-theme="a" data-ajax="false">two</a></li>
			      <li><a href="ajax-content-ignore.html" data-theme="a" data-ajax="false">three</a></li>
			    </ul>
			</div>

			<div id="one" class="ui-content">
			<h1>First tab contents</h1>
			</div>
			<div id="two" class="ui-content">
				<ul data-role="listview">
				    <li><a href="#">Acura</a></li>
				    <li><a href="#">Audi</a></li>
				    <li><a href="#">BMW</a></li>
				    <li><a href="#">Cadillac</a></li>
				    <li><a href="#">Ferrari</a></li>
				</ul>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
			<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
			<p>Copyright 2014 The jQuery Foundation</p>
		</div><!-- /footer -->
	</div>
</div><!-- /page -->

JavaScript

$(function () {
    $("#tabs").on('click','#home2',function(event) {
       
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}
    
    var lineOptions = {
        animation: true,
        pointDot: true,
        scaleOverride : true,
        scaleShowGridLines : false,
        scaleShowLabels : true,
        scaleSteps : 4,
        scaleStepWidth : 25,
        scaleStartValue : 25,
    };
    
    
    
    //radar chart data
	var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
		datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [65,59,90,81,56,55,40]
			},
			{
				label: "My Second dataset",
				fillColor:...