JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
<div id="multiple-datasets">
    <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

CSS

#multiple-datasets .league-name {
    margin: 0 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;

JavaScript

var nbaTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '#1',//&q=%QUERY
            replace: function(url, query) {
                return url + "#" + query + "1"; // used to prevent the data from being cached. New requests aren't made without this (cache: false setting in ajax settings doesn't work) NOTE: "1" added to prevent bloodhound instances from sharing results from same URL
            }
        }
    });

    var nhlTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '#2',//&q=%QUERY
            replace: function(url, query) {
                return url + "#" + query + "2"; // used to prevent the data from being cached. New requests aren't made without this (cache: false setting in ajax settings doesn't work) NOTE: "2" added to prevent bloodhound instances from sharing results from same URL
            }
        }
    });

    nbaTeams.initialize();
    nhlTeams.initialize();

    $('#multiple-datasets .typeahead').typeahead({
            highlight: true
        },
        {
            name: 'nba-teams',
            displayKey: 'team',
            source: nbaTeams.ttAdapter(),
            templates: {
                empty: [
                    '<div class="tt-empty-message">',
                    'No Results',
                    '</div>'
                ].join('\n'),
                header: '<h3 class="tt-tag-heading tt-tag-heading2">1</h3>'
            }
        },
        {
            name: 'nhl-teams',
            displayKey: 'team',
            source: nhlTeams.ttAdapter(),
            templates: {
                empty: [
                    '<div class="tt-empty-message">',
                    'No Results',
                    '</div>'
                ].join('\n'),
       ...