JSFiddle - React, Tailwind, and code Playground

by Renoir Boulanger

HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>DUNDEE WEALTH - ADVISOR.CA Digital News You Can Use</title>
  <!-- minimum-scale=1.0 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">
  <meta name="robots" content="nofollow">
  <script>var debug = false;</script>
  <link rel="shortcut icon" href="favicon.png">
  <link rel="apple-touch-icon" href="favicon.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon.png">
  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon.png">
  <link rel="apple-touch-icon-precomposed" href="favicon.png">
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/modernizr.custom.min.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/jquery.validate.min.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/jquery.form.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/ejs_production.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/dateformat.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/x2j.js"></script>
  <script type="text/javascript" src="http://dundee.advisor.ca/js/libs/iscroll-lite.js"></script>
</head>

<body>
<iframe id="application-bar" width="100%" height="88px" frameborder="0" scrolling="no" src="http://www.dundeewealth.com/global/en/public/launchpad/applicationbar.html"></iframe>
  <div id="container">
    <header>
        <div class="wrapper">
            <a href="#/home"...

CSS

/**
 * Dundee Wealth LocalStorage example
 *
 * Reads RSS feeds and use localStorage to cache feeds
 **/
/* HTML5 ✰ Boilerplate */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word;...

JavaScript

var myScroll;
window.onload = function() {
    
}

window.onorientationchange = function() {
    detectIPadOrientation();
    setTimeout(function () {     
        window.myScroll.refresh();
    }, 0);
}


function detectIPadOrientation () { 
    
    orientation = window.orientation;
     if ( orientation == 0 ) {  
        jQuery('body').removeClass('landscape');
        jQuery('body').addClass('portrait');
        //jQuery('header .dundee').text("Orientation change for : Portrait - Current orientation in degrees: "+orientation);  
        resize();
     }  
     else if ( orientation == 90 ) {  
        jQuery('body').removeClass('portrait');
        jQuery('body').addClass('landscape');
        //jQuery('header .dundee').text("Orientation change for : Landscape - Current orientation in degrees: "+orientation);  
        resize();
     }  
     else if ( orientation == -90 ) { 
        jQuery('body').removeClass('portrait');
        jQuery('body').addClass('landscape');
        //jQuery('header .dundee').text("Orientation change for : Landscape - Current orientation in degrees: "+orientation);
        resize();
     }  
     else if ( orientation == 180 ) {  
        jQuery('body').removeClass('landscape');
        jQuery('body').addClass('portrait');
        //jQuery('header .dundee').text("Orientation change for : Portrait - Current orientation in degrees: "+orientation);  
        resize();
     }; 
     
}  

function setScrollMarker(elem){
    alert("setScrollMarker");

    if ($(elem).outerHeight() + window.myScroll.y == $("#wrapper").outerHeight()) {
        $("#scroll-marker").fadeOut(1000);                                  
    } else {                                    
        $("#scroll-marker").fadeIn(1000);                                        
        
    }
}


$(document).ready(function(){

    // Global
    var baseViewUrl = 'http://www.advisor.ca/views/';
    var baseurl = "http://www.advisor.ca/";
    var debug = false;
    var...