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>
    </head>

    <body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">FuelUX 2 Demo Page</a>
            </div>
        </div>
    </div>

    <div class="container">

        <h1>FuelUX combobox demo</h1><p>

        <!-- BEGIN FUELUX COMBOBOX MARKUP -->
<div id="myCombobox" class="input-append dropdown">
    <input class="span2" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
    <ul class="dropdown-menu">
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li class="divider"></li>
        <li><a href="#">Item After Divider</a></li>
    </ul>
</div>
        <!-- END FUELUX COMBOBOX MARKUP -->

    </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://dl.dropbox.com/u/2202802/vendor/fuelux/fuelux'
            },
            deps: ['fuelux'],
            callback: function(){
                $('#myCombobox').combobox();
            }
        });