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');
	//Выраный пунк select'а
	var selected = $('.select .selected');
	//select
	var select = $('.select select');
	// option
	var option = $('.select option');
	// option:selected
	var optionSelected = $('.select option:selected');
	//Список
	var list = $('.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 = $('.select li');

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

	//Открываем / Скрываем выпадающий список
	container.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');
		});
    });

});