JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<script src="http://freshbrewedcode.com/jimcowart/wp-content/plugins/prettify-wordpress/js/min/prettify_mod.js"></script>
<p>The growth of technologies like local storage, and the exposure of certain device APIs &mdash; like the camera or geolocation &mdash; to the browser (or to a hybrid application) has had an interesting side effect on web developers: the growing need to check the connectivity state of the client. Users are becoming more accustomed to the ability to work seamlessly while disconnected and then synchronize later. In fact, as I write this I'm en route to the AngleBrackets conference, 30k feet in the air with no connectivity on my iPad using Daedalus (an awesome app, btw). But I fully plan to upload this post to my DropBox account when I land. The expectation for this kind of process to just <em>work</em> &mdash; maybe a novelty a few years ago &mdash; has overwhelmingly become the <strong>norm</strong>.</p>
<p>The reason(s) you are checking connectivity may vary per the type of application and intent:</p>
<ul style="list-style: disc inside;">
    <li>Your user wants to upload a picture using your hybrid social app, but they're on a train that just entered a tunnel, causing temporary loss of connectivity. Wouldn't it be great if the upload could simply be queued while potentially alerting the user that their action hasn't been ignored and will be executed as soon as possible?</li>
    <li>You have a cloud-based IDE or document editor, but the user wants to be able to work while in airplane mode. Sure would be nice if the changes the user has made while offline could get immediately persisted to your back end once the connection is available, right?</li>
    <li>Your application has a news or stock ticker. You want to keep displaying the most recent data, but perhaps let the user know through some change in the UI that they're currently offline and might not have the latest data.</li>
</ul>
<p>Regardless of the reason or device - if you're working...

CSS

p, blockquote, ul, ol, dl, li, table, pre {
    margin: 15px 0;
    }
    blockquote {
    border-left: 4px solid #dddddd;
    padding: 0 15px;
    color: #777777;
    }
    blockquote &gt;
    :first-child {
    margin-top: 0;
    }
    blockquote &gt;
    :last-child {
    margin-bottom: 0;
    }
    table {
    padding: 0;
    border-collapse: collapse;
    }
    table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0;
    }
    table tr:nth-child(2n) {
    background-color: #f8f8f8;
    }
    table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px;
    }
    table tr td {
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px 0px 6px;
    }
    table tr th :first-child, table tr td :first-child {
    margin-top: 0;
    }
    table tr th :last-child, table tr td :last-child {
    margin-bottom: 0;
    }
    table td {
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding-left: 10px;
    padding-right: 10px;
    }
    em {
    font-style: italic;
}


/* Pretty printing styles. Used with prettify.js. */

.str {
    color: #080;
}

.kwd {
    color: #008;
}

.com {
    color: #800;
}

.typ {
    color: #606;
}

.lit {
    color: #066;
}

.pun {
    color: #660;
}

.pln {
    color: #000;
}

.tag {
    color: #008;
}

.atn {
    color: #606;
}

.atv {
    color: #080;
}

.dec {
    color: #606;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 12px;
} /* IE indents via margin-left */
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
    background: #eee;
    width: 2000px;
}

.prettyprint {
    position: relative;
    background: #F7F7F7;
    color: #333;
    font-family: Courier, MonoSpace;
    line-height: 1.2;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0px...