JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<form method="POST">
<select name="colors[]" id="tags-example" multiple="multiple">
    <option value="red">apple</option>
    <option value="green">grass</option>
    <option value="blue">water</option>
    <option value="yellow">sun</option>
</select>
    <input type="submit" />
</form>

CSS

select {
    width: 50%;
}

JavaScript

$('#tags-example').select2({
    tags: true,
    tokenSeparators: [',', ' '],
    maximumSelectionLength: 2
});
//
// creates "apple" and "red" tag:
// red,
//
// creates "apple" "grass" "water" "sun" "red" "green" "blue" "yellow"
// red,green,blue,yellow,