JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://select2.github.io/vendor/css/bootstrap.min.css">
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<!--
<select multiple="multiple" class="form-control" data-select2-json="/fr/chez-moi/tags/langues" multiple="multiple" name="known_languages">
  <option value="1" selected="selected">Français</option>
  <option value="2" selected="selected">Chinois simplifié</option>
</select>
-->

    <select multiple="multiple" class="js-data-example-ajax form-control">
      <option value="3620194" selected="selected">select2/select2</option>
      <option value="317757" selected="selected">Modernizr/Modernizr</option>
    </select>

CSS

body {
  padding: 30px;
}

JavaScript

$(function() {

  $(".js-data-example-ajax").select2({
    tokenSeparators: [',', ' '],
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function(markup) {
      return markup;
    }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: formatRepo, // omitted for brevity, see the source of this page
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
  })


  function formatRepo(repo) {
    if (repo.loading) return repo.text;

    var markup = "<div class='select2-result-repository clearfix'>" +
      "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
      "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    if (repo.description) {
      markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
    }

    markup += "<div class='select2-result-repository__statistics'>" +
      "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
      "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + "...