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

$('.text-select').on("click", function(e) {
if (!$('.text-select').hasClass('active')){
	$('.list-select').show('slow');
  $(".text-select").toggleClass('active');
  }
});

$(document).mouseup(function (e){
		if ($('.text-select').hasClass('active') && !$(".list-select").is(e.target)){
      $(".text-select").toggleClass('active');
			$(".list-select").hide('slow');
      }
	});


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