JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option image="http://www.nationalgallery.co.uk/static/images/products/small/1033016.jpg" value="11">Option 1</option>
    <option image="http://www.nationalgallery.co.uk/static/images/products/small/1033016.jpg" value="1">Option 2</option>
    <option image="http://www.nationalgallery.co.uk/static/images/products/small/1033016.jpg" value="1">Option 3</option>
    <option image="http://www.nationalgallery.co.uk/static/images/products/small/1033016.jpg" value="1">Option 4</option>
    <option image="http://www.nationalgallery.co.uk/static/images/products/small/1033016.jpg" value="5">Option 5</option>
</select>

CSS

.custom-select {
    position: relative;
    font-family: arial;
    font-size: 12px;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.custom-select .select-arrow {
    position: absolute;
    top: 42%;
    right: 7px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #464646;
}
.custom-select .selected-item {
    width: inherit;
    white-space: nowrap;
    border-radius: 5px;
    text-align: left;
    padding: 6px 35px 6px 12px;
    min-width: 50px;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #B2B2B0;
    background: #fcfcfc;
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #e3e3e3 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #e3e3e3 100%);
    background: -o-linear-gradient(top, #fcfcfc 0%, #e3e3e3 100%);
    background: -ms-linear-gradient(top, #fcfcfc 0%, #e3e3e3 100%);
    background: linear-gradient(top, #fcfcfc 0%, #e3e3e3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#e3e3e3', GradientType=0);
    -webkit-box-shadow: #ccc 0px 0px 3px;
    box-shadow: #ccc 0px 0px 3px;
    color: #6E6E6E;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-select:hover .selected-item {
    background: #ffffff;
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2',...

JavaScript

(function ($) {
    if (typeof String.prototype.trim !== 'function') {
        String.prototype.trim = function () {
            return this.replace(/^\s+|\s+$/g, '');
        };
    }
    $.fn.customSelect = function (options) {
        $(this).each(function (i, el) {
            var thisElm = $(el);
            //removing already styled select
            if (thisElm.attr('styled')) {
                thisElm.prev('div.custom-select').remove();
            }

            //start
            thisElm.hide();
            var sIndex = thisElm[0].selectedIndex;
            var sValue = thisElm.val();
            var oElm = thisElm.find('option');
            var sText = oElm.eq(sIndex).html();
            var sElm = $('<div/>').addClass('custom-select').attr('tabindex', '-1');
            var sItem = $('<div/>').addClass('selected-item').html(sText);
            var sArrow = $('<div/>').addClass('select-arrow');
            var sInput = $('<input type="text"/>').addClass('custom-select-search');
            var sOption = $('<div class="soption"/>');

            //form reset handler
            var form = thisElm.parents('form');
            var reset = form.find(':reset');
            reset.off('click.customSelectEvent');
            reset.on('click.customSelectEvent', function () {
                thisElm.val(sValue);
            });

            // creating options
            var oStr = '<ul>';
            var optionAry = [];
            var imgStr = "";

            oElm.each(function (ind, elm) {
                if ($(elm).attr('image') && $(elm).attr('image').trim() !== "") {
                    imgStr = '<img src="' + $(elm).attr('image') + '" />';
                } else {
                    imgStr = "";
                }
                oStr = oStr + '<li>' + imgStr + $(elm).html() + '</li>';
                optionAry.push($(elm).html());
            });
            oStr = oStr + '</ul>';

            var sOptions = $(oStr);
            var sLi =...