JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
    <script type="text/javascript">

    // Override update method
    $.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
      var c = this.$search[0] == document.activeElement;
      this.$search.attr("placeholder", "");
      a.call(this, b);
      this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
      this.resizeSearch();
      if (c) {
        var self = this;
        window.setTimeout(function() {
          self.$search.focus();
        }, 0);
      }
    };

    $(document).ready(function() {
        $(".js-example-tokenizer").select2({
          tags: true,
          tokenSeparators: [',', ' ']
        });
    });
    </script>
    <select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
</body>
</html>