JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select">
  <div class="text-select">Выбирай</div>
  <div class="list-select none">
    <div class="a-select">Первый</div>
    <div class="a-select">Второй</div>
    <div class="a-select">Третий</div>
  </div>
</div>

CSS

.list-select {
  position: absolute;
  width: 100%;
  top: 60px;
  z-index: 5;
  background: #EFEFEF;
}

.select {
  position: relative;
}

.a-select:hover {
  background: #EAEAEA;
}

.text-select, .a-select {
  line-height: 50px;
  padding-left: 20px;
}

.select {
  height: 50px;
  width: 240px;
  border:1px solid #ccc;
  cursor: pointer;
}

.none {
  display:none;
}

.opacity {
  opacity:0;
}

JavaScript

$(document).mouseup(function (e){
		if (!$(".list-select").is(e.target))
			$(".list-select").hide('slow');
	});
  
$('.text-select').on("click", function(e) {
	$('.list-select').show('slow');
});

$('.a-select').on("click", function() {
	$('.list-select').hide('slow');
  $('.text-select').text($(this).text());
});