JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<h3>An example of <i>&lt;option&gt;</i> formatting using <a href="http://select2.github.io/select2/" target="_blank">Select2</a> jQuery plugin</h3>

<select id="ddlProducts" style="width: 400px"> 
    <option data-category="Electronics">Product1</option>
    <option data-category="Sports">Product2</option>
</select>

JavaScript

$('#ddlProducts').select2({
    formatResult: function(object) {
        var $el = $(object.element),
            product = $el.text(),
            category = $el.attr('data-category');
        
        return '<b>' + product + '</b>' + ' <i>' + category + '</i>';
    }
});