JSFiddle - React, Tailwind, and code Playground

by rastrano

HTML

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//ENhttp://www.w3.org/TR/html4/stric\
t.dtd> 
<html xmlns:html="http://www.w3.org/1999/xhtml"> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> 
  <title>Dojo Layout</title> 
   <!-- a Dijit theme: --> 
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /> 
   <style> 
     body, html { width:100%; height:100%; margin:0; padding:0; } 
   </style> 
  </head> 
  <body class="claro"> 
  </body> 
</html>

JavaScript

dojo.require("dijit.layout.BorderContainer"); 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.layout.TabContainer"); 
dojo.require("dijit.layout.AccordionContainer"); 
 
dojo.require("dojox.charting.Chart"); 
//Class to create a legend for our chart 
dojo.require("dojox.charting.widget.Legend"); 
dojo.require("dojox.charting.action2d.Magnify"); 
dojo.require("dojox.charting.action2d.Tooltip"); 
dojo.require("dojox.charting.axis2d.Default"); 
dojo.require("dojox.charting.plot2d.Areas"); 
dojo.require("dojox.charting.Theme"); 
dojo.require("dojox.charting.themes.Claro"); 
 
var buildUI = function(){ 
  // the main BC 
  var outer = new dijit.layout.BorderContainer({ 
    style:"width:100%; height:100%" 
    }).placeAt(dojo.body()); 
   
  // top region: 
  new dijit.layout.ContentPane({ 
    region:"top", 
        style:"height:35px", 
        content:"<p>Outer Top</p>", 
        splitter:true 
        }).placeAt(outer); 
   
  new dijit.layout.ContentPane({ 
    region:"left", 
        style:"width:100px", 
        content:"<p>Outer Left</p>", 
        splitter:true 
        }).placeAt(outer); 
 
  // bottom region: 
  var outerTabs = new dijit.layout.TabContainer({ 
    region:"bottom", 
        style:"height:115px", 
        tabPosition:"left", 
        tabStrip: true 
        }).placeAt(outer); 
   
   var center = new dijit.layout.ContentPane({ 
        region:"center", 
        splitter:true 
    }).placeAt(outer); 

  chart1 = new dojox.charting.Chart(center.domNode)   
  .addPlot("default", { type: "Areas", tension: "X" }) 
  .setTheme(dojox.charting.themes.Claro) 
  .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]) 
  .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]) 
  .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]).render(); 

  dojo.connect(center, "resize", chart1, "resize"); 
outer.startup(); 
} 
 
dojo.addOnLoad(buildUI);