JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="span12">
            <ul class="nav nav-pills">
                <li class="active" href="/tv/find/#/"><a>All</a></li>
                <li class="divider"></li>
                <li><a href="http://java2-pc.mshome.net:8080/NOTICES/connection.do?parameter=doget&hostname=vm.schoolstone.com&hostid=root&hostpwd=lee_123&role=Admin&iid=101">TV</a></li>
                <li><a href="/tv/find/#/tips/">Tips</a></li>
                <li><a href="/tv/find/#/basketball/">Basketball</a></li>
                <li><a href="/tv/find/#/football/">Football</a></li>
                <li><a href="/tv/find/#/boxing/">Boxing</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container" id="results">
    <div class="row">

    </div>
</div>

JavaScript

tv = 'find';

// Results array
results = [
    "47191650",
    "47191648",
    "47191647",
    "47191646",
    "47191645",
    "47179830",
    "47179829",
    "47179828",
    "47179827",
    "47179826",
    "47175715",
    "47175713"
];

if (tv === 'find') {
    
    // Split query from url (http://website.com/link/to/page/#/tag/tag/tag/tag = "tag tag tag tag")
    if (location.href.indexOf('/#/') == -1) {
        query = '';
    } else {
        var query = location.href.split('/#/').pop().split('/').join(" ");
    }

    console.log(query);
    
    // Generate Code for each item in array
    for (var i = 0, result; result = results[i]; i++) {

        var resultUrl = 'http://vimeo.com/api/v2/video/' + result + '.json?callback=?';

        // Vimeo API
        $.getJSON(resultUrl, function(json) {
            //console.log(json[0]);
            
            // Get tags, set as class
            var tags = json[0].tags.split(',').join(" ");
            
            
            // Create HTML
            var tile = $('#results > .row')
                .append('<div class="span4 ' + tags + '" id="' + json[0].id + '"><div class="content">')
                .children('.span4#' + json[0].id)
                .children('.content')
                .wrap('<a href="/tv/watch/?v=' + json[0].id + '"></a>')
                .append('<img src="' + json[0].thumbnail_large + '" />')
                .append('<h3>' + json[0].title)
            
            if (json[0].description !== '') {
                tile.append('<p>' + json[0].description.substring(0,100) + '... <em>(Click to view)');
            } else {
                tile.append('<p><em>(Click to view video)');
            }
            
            if (query !== "") {
                // Find Parent
                var thisTile =  $('#' + json[0].id ),
                    matchesClass = thisTile.hasClass(query);
        
                // If does hot have query as class then hides
                if (matchesClass ===...