JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<link rel="stylesheet" href="https://select2.github.io/vendor/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-12">
        <select class="select2" multiple="true" style="width: 500px;"></select>
    </div>
</div>

JavaScript

function formatRepo (repo) {
    if (repo.loading || !repo.hasOwnProperty('full_name')) return repo.text;
    
    var markup = +
        '<div class="row">'+
            '<div class="col-sm-12">' + repo.full_name + '</div>' +
        '</div>';
     
    return markup;
}

function formatRepoSelection (repo) {
    return repo.full_name || repo.text;
}

$('.select2').select2({
    tags: true,
    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) {
            params.page = params.page || 1;
            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});