JSFiddle - React, Tailwind, and code Playground

by dandiebolt

HTML

<div id="slides">
  <div class="slide">
    <h2>jQuery Week 1: JavaScript Review</h2> 
          <p>JavaScript has been described as the worlds most misunderstood language. Let's try and clear that up in this presentation. First home history ...</p> 
          <ul> 
<li>Javascript was Developed by Brendan Eich of Netscape in 1995 at the Start of the Browser Wars</li>
<li>Early Names for Javascript were Mocha and Livescript; Microsoft's Version is Called Jscript</li>
<li>The Official name For JavaScript is now ECMAscript and the Current Version is Ecma-262</li>
<li>Everyone Still Calls It Javascript</li>
<li>Although Frequently Confused, JavaScript has nothing to do with Java</li>
<li>Brendan Eich is now Chief Technology Officer at the Mozilla Corporation and Continues to Lead the Development of JavaScript Through the Standards Committee Process</li>
              <li><i>"Ecmascript Was Always An Unwanted Trade Name That Sounds Like A Skin Disease."</i> - Brendan Eich</li>
<li>JavaScript is more Popular than ever Today and has Experienced a Revolution in its Capabilities and Adoption </li>
<li>jQuery is a JavaScript Library Created by John Resig that Makes it easy to do DOM Scripting in a Browser Despite Browser Differences</li>
          </ul>
  </div>
  <div class="slide">
      <h2>Slide 2</h2>
<code class="language-javascript">
// Define our Function
function checkMeaningOfLife ( decimal, success ) {
    if ( parseInt(decimal,10) === 42 ) {
        window.console.log(success);
    }
};
// Define our Variables
var str = 'The meaning of life is true',
    decimal = 42.00;
// Fire our Function
checkMeaningOfLife(decimal,success);
</code>
  </div>

<div class="slide">
<h2>JavaScript Datatypes</h2>
<p>JavaScript support a small set primitive datatypes and the generic datatype simly called an object. Everything not a primitieve datatype is an object although there are several types of speicialized objetcs.</p> 
<p>Primitive datatypes</p>
<ul> 
<li>Numbers (integers...

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .btn 
{ margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; vertical-align: baseline }
a img, frameset { border: 0; }
table {    border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left;    font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q {    quotes: "" ""; }

.hide { display: none; }
.contain-overflow { overflow: hidden; }
.screen-reader { display: block; left: -9999px; position: absolute; top: -9999px; }
.row:after, .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-size: 1.1em; font-style: italic; font-weight: normal; }

body {
  background: #1a1f1e url(../images/structure/bg-body.png);
  color: #e3dfba;
    font: 16px Helvetica, Arial, Sans-Serif;
}

    h1, h2, h3, h4, h5, h6 { font-weight: normal; }
    h1 { font-size: 16px; line-height: 16px; }
    h2, h3, h4, h5 { font-family: Georgia, "Times New Roman", Times, serif; }
    h2 { color: #6cbdb5; font-size: 24px; line-height: 24px; padding-bottom: 5px; }

    a, a:link { text-decoration: underline; }
    a:visited {}
    a:hover { text-decoration: none; }
    a:active {}

    p, ol, ul, table { margin: 0 0 16px; }
    ul { list-style: square; }
    li { padding: 10px 0; }
    li:first-child { padding-top: 0; }
    li:last-child { border-bottom: none; padding-bottom: 0; }

    code {background-color: white;}
    code li { padding: 0px 0; }

    #header, #footer {
      background: rgba(147,204,198,0.5);
      color: #fff;
      font-size: 16px; 
      line-height: 16px;
      position: fixed;
      width:...

JavaScript

$('#slides').presentation({
  slide: '.slide', //Reference to each individual slide
  pagerClass: 'nav-pager', //Class to put on the unordered list that contains links to each slide
  prevNextClass: 'nav-prev-next', //Class to put on the unordered list that contains the previous and next links
  prevText: 'Previous', //Text for the Previous link
  nextText: 'Next', //Text for the Next link
  transition: 'fade' //Possible values are 'fade', 'show/hide', 'slide'
});