JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 400px; margin: 50px auto 0;">



<div class="select">
	<div class="selected"></div>
	<ul class="list"></ul>	
	<select>
		<option>Red Hat</option>
		<option>Ubuntu</option>
		<option>Debian</option>
		<option>OpenSuse</option>
		<option>Fedora</option>
	</select>
</div>
<div class="select">
	<div class="selected"></div>
	<ul class="list"></ul>	
	<select>
		<option>Red Hat</option>
		<option>Ubuntu</option>
		<option>Debian</option>
		<option>OpenSuse</option>
		<option>Fedora</option>
	</select>
</div>




</div>

CSS

* {
    box-sizing: border-box;
}
.select {
     position: relative;
	 cursor: pointer; 
    width: 200px;
	float: left;
}
.select .selected {
    width: 100%;
    height: 30px;
    display: block;
    padding: 0 27px 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    line-height: 30px;
}
.select ul {	
	width: 100%;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #d9d9d9;	
	background: #fff;
	border-radius: 0 0 3px 3px;
	position: absolute;
    top: 100%;
    left: 0;
	display: none;
	z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.select .focus {
	border-radius: 3px 3px 0 0;
}
.select li {
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
}
.select select {
    display: none;
}

JavaScript

$(function(){

	//Главный контейнер
	var container = $('.select');
	
    container.each(function() {
        var box = $(this);
    	//Выраный пунк select'а
        var selected = box.find('.selected');
        //select
        var select = box.find('select');
        // option
        var option = box.find('option');
        // option:selected
        var optionSelected = box.find('option:selected');
        //Список
        var list = box.find('.list');

        //Выбраный пункт select'а передаем в div.selected
        selected.text(select.val());

        //Все пункты select'а передаем в список ul.select-list
        option.each(function(i, item){
            list.append('<li>' + $(item).text() + '</li>');
        });

        //Пункт выпадающего списка
        var listItem = box.find('li');

        //При клике на пункт списка очищаем div.seleted, и перадаём в него и в select выбранное значение
        listItem.each(function(i, item){
            $(item).click(function(){
                selected.text('');
                selected.append($(this).text());
                optionSelected.text(selected.text());
            });
        });

        //Открываем / Скрываем выпадающий список
        box.click(function(){
            if(selected.hasClass('focus')){
                list.slideUp(300, function(){
                    selected.removeClass('focus');
                });
                return;
            };

            list.slideDown(300);
            selected.addClass('focus');
        });

        $(document).click(function (element) {
            if ($(element.target).parents(".select").size() > 0) return;
            list.slideUp(300, function(){
                selected.removeClass('focus');
            });
        });
    })

});