JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://sakhthesab.lemonn.ir/style/custom-ui.css">
<script src="http://sakhthesab.lemonn.ir/js/uikit.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<p>in page everything is fine:</p>
<select class="chosen-select">
	<option value="4">one</option>
	<option value="2">two</option>
	<option value="1">three</option>

</select>
<hr/>
<!-- This is the anchor toggling the modal -->
        <a href="#my-id" data-uk-modal>click me</a>

        <!-- This is the modal -->
        <div id="my-id" class="uk-modal">
            <div class="uk-modal-dialog uk-modal-dialog-frameless">
                <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                <div style="text-align:center;">
                <p>hello modal!</p>
                <p>
                    <select class="chosen-select">
	<option value="4">one</option>
	<option value="2">two</option>
	<option value="1">three</option>

</select>

                </p>
                    </div>
            </div>
        </div>

JavaScript

$(document).ready(function(){
var config = {
       
        '.chosen-select-no-results': { no_results_text: 'nothing found!' }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
});