JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="http://demo.famo.us/tweetus/js/lib/famous.lib.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<link rel="stylesheet" href="http://demo.famo.us/tweetus/css/famous.css">
<link rel="stylesheet" href="http://demo.famo.us/tweetus/css/fonts.css">
<link rel="stylesheet" href="http://demo.famo.us/tweetus/css/signup/signup.css">
<base href="http://demo.famo.us/tweetus/" />

CSS

body {
    font-family: open_sansregular, sans-serif;
    background-image: url("/tweetus/content/mback_small.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    text-align: center;
}


.header {
    background-color: #4294ce;
    color: #fff;
    background: #76c5fb; /* Old browsers */
    background: -moz-linear-gradient(top, #76c5fb 0%, #60abe2 1%, #2978b1 99%, #18659d 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, #76c5fb 0%,#60abe2 1%,#2978b1 99%,#18659d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #76c5fb 0%,#60abe2 1%,#2978b1 99%,#18659d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #76c5fb 0%,#60abe2 1%,#2978b1 99%,#18659d 100%); /* IE10+ */
    background: linear-gradient(to bottom, #76c5fb 0%,#60abe2 1%,#2978b1 99%,#18659d 100%); /* W3C */
    font-family: open_sansbold, sans-serif;
    font-size: 18px;
    line-height: 26px;
    padding: 10px;
    text-align: center;
    text-shadow: rgba(0,0,0,0.75) 0px -1px 0px;
    z-index: 1;
}

.header .bird {
    font-family: entypo-social;
    font-size: 60px;
    color: hsl(207,75%,70%);
}

.header .icon {
    display: block;
    height: 100%;
    top: 0px;
    right: 0px;
    letter-spacing: 10px;
    position: absolute;
    font-size: 46px;
    line-height: 46px;
    font-family: 'entypo';
}

.navigation {
    padding: 3px;
    font-family: open_sansbold;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    vertical-align: middle;
    text-shadow: rgba(0,0,0,0.75) 0px -1px 0px;
    z-index: 1;
}

.navigation.off {
    color: #999;
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top, #000000 0%, #595959 1%, #383838 4%, #101010 98%, #000000 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, #000000 0%,#595959 1%,#383838 4%,#101010 98%,#000000 100%); /*...

JavaScript

//CodePen Evaluation License 
//
//Copyright (c) 2013 Famo.us, Inc.
//
// Non-sublicensable permission is hereby granted, free of charge,
// to any person obtaining a copy of this software and associated
// documentation files directly from codepen.io (the "Software"), solely to
// internally make and internally use copies of the Software to test,
// explore, and evaluate the Software solely in such person’s non-commercial,
// non-production environments, provided that the above copyright
// notice and this permission notice shall be included in all copies or
// substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Famous(function(require) {
    // import dependencies
    var FamousEngine = require('famous/Engine');
    var FastClick = require('famous-sync/FastClick');

    var Scrollview = require('famous-views/Scrollview');
    var ViewSequence = require('famous/ViewSequence');
    var Surface = require('famous/Surface');
  
    // boilerplate: the application template (normally in a separate require)
    var View = require('famous/View');
    var EventHandler = require('famous/EventHandler');
    var OptionsManager = require('famous/OptionsManager');
    var RenderNode = require('famous/RenderNode');
    var Utility = require('famous/Utility');
    
    var HeaderFooterLayout = require('famous-views/HeaderFooterLayout');
    var EdgeSwapper = require('famous-views/EdgeSwapper');
    
    var NavigationBar = require('famous-widgets/NavigationBar');
    var TitleBar =...