JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<select id="mysel">
    <optgroup label="First group">
        <option value="0" data-active="1">Hello</option>
        <option value="1" data-active="0">Stack</option>
    </optgroup>
    <optgroup label="Second group">
        <option value="2" data-active="1">Overflow</option>
        <option value="3" data-active="1">Friends</option>
    </optgroup>
</select>

CSS

body {
    padding: 20px;
}
.fa-check-circle {
    float: right;
    position: relative;
    line-height: 20px;
}

JavaScript

$("#mysel").select2({
    width: "100%",
    formatResult: function (referencia) {
        if (!referencia.id) return referencia.text; // optgroup

        if ($(referencia.element).data('active') == "1") {
            return referencia.text + "<i class='fa fa-check-circle'></i>";
        } else {
            return referencia.text;
        }
    },
    formatSelection: function (referencia) {
        if ($(referencia.element).data('active') == "1") {
            return referencia.text + "<i class='fa fa-check-circle'></i>";
        } else {
            return referencia.text;
        }
    }
});