JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<link rel="stylesheet" href="https://d2c87l0yth4zbw.cloudfront.net/css/80278a9.css">
<div class="container">
    <h1>Related Artists Demo</h1>
    <form id="search-form">
        <input type="text" id="query" value="" class="form-control" placeholder="Type an artist's name" />
        <input type="submit" id="search" class="btn btn-primary" value="Search" />
    </form>
    <div id="results"></div>
</div>
<script id="results-template" type="text/x-handlebars-template">
    <h2>This is a list of <strong>{{artistName}}</strong>'s related artists</h2>
    {{#each artists}}
    <div class="media">
        <div style="background-image:url({{images.1.url}})" data-album-id="{{id}}" class="media-object cover"></div>
        <div class="media-body">
        <h4 class="media-heading">{{name}}</h4>
        </div>
    </div>
    {{/each}}
</script>

CSS

body {
    padding: 20px;
}

#search-form, .form-control {
    margin-bottom: 20px;
}

.cover {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: cover;
}

.cover:hover {
    cursor: pointer;
}

.cover.playing {
    border: 5px solid #e45343;
}

.media {padding: 10px;}
.media .media-object {float:left; margin-right: 10px;}

JavaScript

// find template and compile it
var templateSource = document.getElementById('results-template').innerHTML,
    template = Handlebars.compile(templateSource),
    resultsPlaceholder = document.getElementById('results');

var fetchRelatedArtists = function (artistId, callback) {
    $.ajax({
        url: 'https://api.spotify.com/v1/artists/' + artistId + '/related-artists',
        success: function (response) {
            callback(response);
        }
    });
};

var searchArtist = function (query, callback) {
    $.ajax({
        url: 'https://api.spotify.com/v1/search',
        data: {
            q: query,
            type: 'artist'
        },
        success: function (response) {
            var item = response.artists.items[0];
            callback(item.id, item.name);
        }
    });
};

document.getElementById('search-form').addEventListener('submit', function (e) {
    e.preventDefault();
    var artistName = document.getElementById('query').value;
    searchArtist(artistName, function(id, foundName) {
        fetchRelatedArtists(id, function(relatedArtists) {
            relatedArtists.artistName = foundName;
            resultsPlaceholder.innerHTML = template(relatedArtists);
        });
    });
}, false);