JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<select class="select2">
</select>

JavaScript

var data = [{ id: 0, text: 'gray' }, { id: 1, text: 'green' }, { id: 2, text: 'blue' }, { id: 3, text: 'yellow' }, { id: 4, text: 'red' }];

function formatState (state) {
  var $state = $('<div class="bg-' + state.text + '" style="background-color: ' + state.text + ';" > ' + state.text + '</div>'
  )
  return $state;
  };
  
$('.select2').select2({
  data: data,
  templateResult: formatState
});