JSFiddle - React, Tailwind, and code Playground

HTML

<select name="sizes" id="sizes" class="makePlain">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

CSS

ul {
    border: 1px solid #000;
    wight: 
}
ul li {
    background-color: red;
    display: list-item;
}

ul li.unselected {
    background-color: #fff;
    display: none;
}

ul:hover li,
ul:hover li.unselected {
    display: list-item;
}

JavaScript

(function($) {
    $.fn.selectUl = function(){
        var $origSelect = $(this);
        var newId = $(this).attr('name') + '-ul';
        var numOptions = $(this).children().length;        
        $('<ul id="' + newId + '" class="plainSelect" />')
            .insertAfter($(this));        
        for (var i = 0; i < numOptions; i++) {
            var text = $(this).find('option').eq(i).text();
           $('<li />').text(text).appendTo('#' + newId);
        }        
        if ($(this).find('option:selected')) {
            var selected = $(this).find('option:selected').index();
            $('#' + newId)
                .find('li')
                .not(':eq(' + selected + ')')
                .addClass('unselected');
        }        
        $('#' + newId + ' li')
            .hover(
                function(){
                    $(this).click(
                        function(){
                            var newSelect = $(this).index();
                            $(this)
                                .parent()
                                .find('.unselected')
                                .removeClass('unselected');
                            $(this)
                                .parent()
                                .find('li')
                                .not(this)
                                .addClass('unselected');
                            $($origSelect)
                                .find('option:selected')
                                .removeAttr('selected');
                            $($origSelect)
                                .find('option:eq(' + newSelect + ')')
                                .attr('selected',true);
                        });
                },
                function(){
            });
                    // assuming that you don't want the 'select' visible:
                    $(this).hide();
        
        return $(this);
    }
        })(jQuery);

$('nameName').selectUl();