JSFiddle - React, Tailwind, and code Playground

by davestein

CSS

body { 
  padding: 10px;   
  font-family : Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  background-color: #EFEFEF;
  padding: 5px;
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}

h1 span {
  font-weight: normal;
  font-size: 14px;    
}

.section {
  border: solid 1px #CCC;  
  margin-bottom: 20px;
}

table {
  width: 100%;
}

th {
  padding: 5px;
  font-size: 14px;
  font-weight: bold;    
}

td {
  padding: 5px;
}

td, th {
  text-align: left;
  vertical-align: top;
  border-bottom: solid 1px #CCC;   
}

.js {
  font-family: 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
  width: 400px;
}

JavaScript

var DOM = {
  title : 'DOM',
  items : [{
    js : 'document',
    def : 'Variable everything on the page lives in'
  },{
    js : 'document.getElementById',
    def : 'Function to get reference of DOM node'
  },{
    js : 'document.getElementsByTagName',
    def : 'Function to get array of references for all DOM nodes of that type'
  },{
    js : 'document.createElement',
    def : 'Create an element that isn\'t attached to DOM yet'
  },{
    js : 'document.body',
    def : 'Direct reference to body DOM node. No, document.head does not exist.'
  }]

};

var glossary = {
  title : 'Glossary',
  items : [{
    js : 'DOM',
    def : 'Stands for Document Object Model. It\'s where all elements on the page live'
  },{
    js : 'DOM Node',
    def : 'The JavaScript representation of an element like a DIV, FORM, or even straight text'
  },{
    js : 'Variable',
    def : 'A referenced to stored information'
  },{
    js : 'Function',
    def : 'A grouping of commands that run together, that you would want to run in different places'
  },{
    js : 'Events',
    def : 'A command that is triggered when certain actions are taken on a page'
  },{
    js : 'Native Global Functions',
    def : 'Functions built into the browser that can be called anywhere on practically anything'
  },{
    js : 'Variable Type',
    def : 'What kind of variable, a variable is.'
  }]

};

var global_functions = {
  title : 'Native Global Functions',
  items : [{
    js : 'alert',
    def : 'Make an annoying popup appear on the page'
  },{
    js : 'typeof',
    def : 'Find type a variable is'
  },{
    js : 'parseInt',
    def : 'Turn a string into an integer number'
  },{
    js : 'parseFloat',
    def : 'Turn a string into a decimal number'
  },{
    js : 'console.log',
    def : 'Print out useful debugging info if you have a console open ( like Firebug )'
  }]

};

var sections = [];

sections.push( glossary );
sections.push( DOM );
sections.push( global_functions );

for ( var i=0;...