JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<div id="ember4564" class="ember-view raw-table supported-table">
    <div class="lightbox-dim" data-ember-action="128"></div>
    <div class="lightbox-body"> <a class="action-icon close-icon" data-ember-action="129"></a>
 <a class="action-icon story-shortcut" data-ember-action="130" onclick="drawClick()">
  <div>Story</div>
</a>

        <div id="test" style="position: relative; clear:both;" class="floatThead-wrapper">
            <div class="floatThead-scroll-container">
                <table style="table-layout: fixed;">
                    <colgroup>
                        <col style="width: 373px;">
                            <col style="width: 412px;">
                    </colgroup>
                    <thead>
                        <tr style="height: 29px;" class="size-row">
                            <th class="floatThead-col-0"></th>
                            <th class="floatThead-col-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <script id="metamorph-120-start" type="text/x-placeholder"></script>
                        <script id="metamorph-115-start" type="text/x-placeholder"></script>
                        <tr>
                            <td>
                                <script id="metamorph-121-start" type="text/x-placeholder"></script>ARMY 00311 1
                                <script id="metamorph-121-end" type="text/x-placeholder"></script>
                            </td>
                            <td>
                                <script id="metamorph-122-start" type="text/x-placeholder"></script>
                                <script id="metamorph-122-end" type="text/x-placeholder"></script>
                            </td>
                        </tr>
                        <script id="metamorph-115-end" type="text/x-placeholder"></script>
                        <script id="metamorph-116-start" type="text/x-placeholder"></script>
           ...

CSS

/*! normalize.css v2.1.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
 audio, canvas, video {
    display: inline-block;
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
 audio:not([controls]) {
    display: none;
    height: 0;
}
/**
 * Address styling not present in IE 8/9.
 */
[hidden] {
    display: none;
}
/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Prevent system color scheme's background color being used in Firefox, IE,
 *  and Opera.
 * 2. Prevent system color scheme's text color being used in Firefox, IE, and
 *  Opera.
 * 3. Set default font family to sans-serif.
 * 4. Prevent iOS text size adjust after orientation change, without disabling
 *  user zoom.
 */
 html {
    background: #fff;
    /* 1 */
    color: #000;
    /* 2 */
    font-family: sans-serif;
    /* 3 */
    -ms-text-size-adjust: 100%;
    /* 4 */
    -webkit-text-size-adjust: 100%;
    /* 4 */
}
/**
 * Remove default margin.
 */
 body {
    margin: 0;
}
/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
 a:focus {
    outline: thin dotted;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
 a:active, a:hover {
    outline: 0;
}
/*...

JavaScript

/*
  html2canvas 0.4.1 <http://html2canvas.hertzen.com>
  Copyright (c) 2013 Niklas von Hertzen

  Released under MIT License
*/

(function (window, document, undefined) {

    "use strict";

    var _html2canvas = {},
    previousElement,
    computedCSS,
    html2canvas;

    _html2canvas.Util = {};

    _html2canvas.Util.log = function (a) {
        if (_html2canvas.logging && window.console && window.console.log) {
            window.console.log(a);
        }
    };

    _html2canvas.Util.trimText = (function (isNative) {
        return function (input) {
            return isNative ? isNative.apply(input) : ((input || '') + '').replace(/^\s+|\s+$/g, '');
        };
    })(String.prototype.trim);

    _html2canvas.Util.asFloat = function (v) {
        return parseFloat(v);
    };

    (function () {
        // TODO: support all possible length values
        var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
        var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
        _html2canvas.Util.parseTextShadows = function (value) {
            if (!value || value === 'none') {
                return [];
            }

            // find multiple shadow declarations
            var shadows = value.match(TEXT_SHADOW_PROPERTY),
                results = [];
            for (var i = 0; shadows && (i < shadows.length); i++) {
                var s = shadows[i].match(TEXT_SHADOW_VALUES);
                results.push({
                    color: s[0],
                    offsetX: s[1] ? s[1].replace('px', '') : 0,
                    offsetY: s[2] ? s[2].replace('px', '') : 0,
                    blur: s[3] ? s[3].replace('px', '') : 0
                });
            }
            return results;
        };
    })();


    _html2canvas.Util.parseBackgroundImage = function (value) {
        var whitespace = ' \r\n\t',
            method, definition, prefix, prefix_i, block, results = [],
            c, mode = 0,
            numParen...