JSFiddle - React, Tailwind, and code Playground

HTML

<div id="customer_list"  style="width:100%;">
				<div>Lista klientów/kontrahentów</div>
				<div style="width:100%;">
					<select class="custom-combobox" id="$namespace$contractor.id" name="$namespace$contractor.id" style="min-width:50%; color:#8D8D8D;" placeholder="Wybierz klienta/kontrahenta...">
						<option value="-1" comment="potrzebne do dzialania combobox"></option>
							<option style="font-weight:bold;" value="$customer.id"
							data-name="$customer.name"
							data-city="$!customer.city"
							data-street="$!customer.street"
							data-zipcode="$!customer.zipcode"
							data-phone="$!customer.phone"
							data-fax="$!customer.fax"
							data-nip="$!customer.nip"
							data-email="$!customer.email">$customer.name</option>

							<option value="$customer.id"
							data-name="$customer.name"
							data-city="$!customer.city"
							data-street="$!customer.street"
							data-zipcode="$!customer.zipcode"
							data-phone="$!customer.phone"
							data-fax="$!customer.fax"
							data-nip="$!customer.nip"
							data-email="$!customer.email">$customer.name</option>
	
					</select>
				</div>
				</div>

CSS

.ui-widget {
	border-radius: 3px;
}

.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
    
}

.custom-combobox-toggle.ui-state-default, .custom-combobox-toggle.ui-state-active {
	background: #2293f7 url(images/ui-bg_flat_26_2293f7_40x100.png) 50% 50% repeat-x !important;  
}

.custom-combobox-toggle.ui-state-hover {
	background: #1484e6 url(images/ui-bg_flat_22_1484e6_40x100.png) 50% 50% repeat-x !important;
}


.ui-autocomplete-input  {
	background: white !important;
	color: #8d8d8d  !important;
	border: 1px solid #ddd;
	height: 20px  !important;
	line-hight: 20px  !important;
	padding: 4px 6px 4px 6px  !important;
}

.ui-menu .ui-menu-item a:hover
{
	color: white;
	font-weight: bold;
}

.custom-combobox {
	background: white !important;
}

.custom-combobox-input {
	background: white !important;
	color: #8d8d8d  !important;
	border: 1px solid #ddd;
	height: 20px  !important;
	line-hight: 20px  !important;
	padding: 4px 6px 4px 6px  !important;
	font-weight: normal;
}

.custom-combobox-toggle {
	background: white !important;
	color: #8d8d8d  !important;
	border: 1px solid #ddd  !important;
	height: 20px  !important;
	line-hight: 20px  !important;
	padding: 4px 6px 4px 6px  !important;
}

JavaScript

(function( $ ) {
    $.widget( "custom.combobox", {
        _create: function() {
            this.wrapper = $( "<span>" )
                .addClass( "custom-combobox" )
                .insertAfter( this.element );

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },
        _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
                value = selected.val() ? selected.text() : "";

            this.input = $( "<input>" )
                .appendTo( this.wrapper )
                .val( value )
                .attr( "title", "" )
                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: $.proxy( this, "_source" ),
                    select: function( event, ui){
                        messagetext_log( ui.item ?
                            ui.item.value:
                            "Nothing selected, input was " + this.value );
                    }

                })
                .tooltip({
                    tooltipClass: "ui-state-highlight"
                });

            this._on( this.input, {
                autocompleteselect: function( event, ui ) {
                    ui.item.option.selected = true;
                    this._trigger( "select", event, {
                        item: ui.item.option
                    });
                },

                autocompletechange: "_removeIfInvalid"
            });
        },
        _createShowAllButton: function() {
            var input = this.input,
                wasOpen = false;

            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .tooltip()
                .appendTo( this.wrapper )
                .button({
           ...