JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="select-wrapper">
  <select class="select2-example-select" data-has-select2 multiple>
 
  </select>
</div>

<div class="select-value">

</div>

CSS

.select-wrapper {
  width: 500px;
}

.select-wrapper .select2-example-select {
  width: 100%;
}

.select-value {
  margin-top: 15px;
  padding: 15px;
  width: 300px;
  font-size: 16px;
}

/* Result style */

.select2-result-repository {
  padding-top: 4px;
  padding-bottom: 3px
}

.select2-result-repository__avatar {
  float: left;
  width: 60px;
  margin-right: 10px
}

.select2-result-repository__avatar img {
  width: 100%;
  height: auto;
  border-radius: 2px
}

.select2-result-repository__meta {
  margin-left: 70px
}

.select2-result-repository__title {
  color: black;
  font-weight: 700;
  word-wrap: break-word;
  line-height: 1.1;
  margin-bottom: 4px
}

.select2-result-repository__forks,
.select2-result-repository__stargazers {
  margin-right: 1em
}

.select2-result-repository__forks,
.select2-result-repository__stargazers,
.select2-result-repository__watchers {
  display: inline-block;
  color: #aaa;
  font-size: 11px
}

.select2-result-repository__description {
  font-size: 13px;
  color: #777;
  margin-top: 4px
}

.select2-results__option--highlighted .select2-result-repository__title {
  color: white
}

.select2-results__option--highlighted .select2-result-repository__forks,
.select2-results__option--highlighted .select2-result-repository__stargazers,
.select2-results__option--highlighted .select2-result-repository__description,
.select2-results__option--highlighted .select2-result-repository__watchers {
  color: #c6dcef
}

JavaScript

// Not (yet) working example of select all for remote select2

var SELECT_ALL_LIMIT = 70;

$.fn.select2.amd.define('select2/selectAllAdapter', [
  'select2/utils',
  'select2/dropdown',
  'select2/dropdown/attachBody'
], function(Utils, Dropdown, AttachBody) {
  function SelectAll() {}

  SelectAll.prototype.render = function(decorated) {
    var $rendered = decorated.call(this);
    var self = this;

    var $selectAll = $(
      '<button type="button">Select All</button>'
    );

    var checkOptionsCount = function() {
      var count = $('.select2-results__option').length;
      $selectAll.text('Select All (' + count + ')');
      $selectAll.prop('disabled', count > SELECT_ALL_LIMIT);
    }


    var $container = $('.select2-container');
    $container.bind('keyup click', checkOptionsCount);

    var $dropdown = $rendered.find('.select2-dropdown')


    $dropdown.prepend($selectAll);

    $selectAll.on('click', function(e) {
      var $results = $rendered.find('.select2-results__option[aria-selected=false]');

      // Get all results that aren't selected
      $results.each(function() {
        var $result = $(this);

        // Get the data object for it
        var data = $result.data('data');
        console.log(data) // <-- No data!
        console.log($result.data())

        // Trigger the select event
        self.trigger('select', {
          data: data
        }); // <-- TypeError, data is undefined
      });

      self.trigger('close');
    });

    return $rendered;
  };

  return Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      AttachBody
    ),
    SelectAll
  );
})


$(function() {
  var $select = $("[data-has-select2]")
  var formatter = new RepositoryFormatter()

  $select.select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
     ...