JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action=""> 

<div>
            <select class="select" title="Select one">
                <option selected>Select</option>
                <option>Blue</option>
                <option >Red</option>
                <option>Green</option>
                <option>Yellow</option>
                <option>Brown</option>
            </select>
        </div>

</form>

JavaScript

$(document).ready(function(){    

        if (!$.browser.opera) {
    
            // select element styling
            $('select.select').each(function(){
                var title = $(this).attr('title');
                if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
                $(this)
                    .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                    .after('<span class="select">' + title + '</span>')
                    .change(function(){
                        val = $('option:selected',this).text();
                        $(this).next().text(val);
                        })
            });

        };
            var min_width = 100;

$('select.select').each(function(){
    var option_width = $('option').outerWidth();
    if (option_width > min_width) {
        min_width = option_width;
    }
});

$('.select').css('min-width', min_width - 10 + 'px');
        
      
      
        
    });