JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<!DOCTYPE html>
<html lang="en" class="fuelux">
    <head>
    <meta charset="utf-8">
    <title>FuelUX 2 Demo Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://dl.dropbox.com/u/2202802/vendor/fuelux/css/fuelux.css" rel="stylesheet">

    <script src="https://dl.dropbox.com/u/2202802/vendor/requirejs/require.js"></script>

    
    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://dl.dropbox.com/u/2202802/vendor/prettify/prettify.js"></script>

    </head>

    <body onload="prettyPrint()">

                        <div id="MySearch" class="input-append search">
                            <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
                        </div>
    </body>
</html>

CSS

body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }

JavaScript

requirejs.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        'fuelux': 'https://github.com/adamalex/fuelux/raw/master/dist/fuelux'
    },
    deps: ['fuelux'],
    callback: function() {
        $('#MySearch').on('searched', function(e, text) {
            alert('Searched: ' + text);
        });
    }
});