JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<select class="js-example-basic-single" name="state">

</select>

CSS

select {
  width: 500px;
}

JavaScript

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2(
      {
        ajax: {
          url: 'https://jsonplaceholder.typicode.com/todos',
          dataType: 'json',
          data: function (params) {
            return {
              q: params.term // search term
            };
          },
          processResults: function (data) {
            return {
              results: data // results
            };
          }
        },
        templateResult: formatResults, // Controls how the dropdown looks
  			templateSelection: formatSelection, // Controls what is displayed after selecting an item
        escapeMarkup: function (m) { return m; }, // Let our custom formatter work
      }
    );
});

function formatResults (data) {
  if (data.loading) {
    return data.text;
  }

	var result;
  if (data.completed) {
    	result = "<div class='select2-result-repository__description'>" + data.title + "</div>";
  }
  return result;
}

function formatSelection (data) {
  return data.id + ' - ' + data.title || data.text;
}