JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/es.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/de.js"></script>
<h4>
When you click on a select box, <br>
just type some crap and you ill see the localized messages in its respective language.
</h4>
<!-- The first select uses the default language which I set to de. Take a look at the JS section -->
<select class="select--artist">
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

<select class="select--category" lang="es">
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

<select class="select--category" lang="pl">
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

JavaScript

$.fn.select2.defaults.set('language', 'de');
$.fn.select2.defaults.set('allowClear', true);
$.fn.select2.defaults.set('width', '100%');


// Individual
$('select.select--artist').select2({
  placeholder: 'Artist'
});

$('select.select--category').select2({
  placeholder: 'Category'
});