JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select_side">
							<div class="select"><span>Выберите</span></div>
							<div class="drop">
								<ul>
									<li>1</li>
									<li>2</li>
									<li>3</li>
								</ul>
							</div>
						</div>
            <div class="select_side">
							<div class="select"><span>Выберите 2</span></div>
							<div class="drop">
								<ul>
									<li>44</li>
									<li>55</li>
									<li>45</li>
								</ul>
							</div>
						</div>

CSS

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
    padding: 0;
}

body {
  padding: 40px;
}

.select_side {
	display: inline-block;
	min-width: 196px;
	position: relative;
}

.select_side .select {
  border: 1px solid #000;
	position: relative;
	height: 39px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	cursor: pointer;
	padding: 0 47px 0 20px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}

.select_side .select span {
	font-size: 14px;
  color: #2F2F2F;
	line-height: 37px;
}

.select_side .drop {
	position: absolute;
	width: 100%;
	top: 49px;
	right: 0;
	background: #FFF;
	padding: 10px;
	box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
	-webkit-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
	-moz-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	z-index: 200;
	transform: scale(0) translate3d(0,-40px,0);
	-webkit-transform: scale(0) translate3d(0,-40px,0);
	-moz-transform: scale(0) translate3d(0,-40px,0);
	-o-transform: scale(0) translate3d(0,-40px,0);
	-ms-transform: scale(0) translate3d(0,-40px,0);
	transform-origin: 50% 0;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	opacity: 0;
	visibility: hidden;
  transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
}

.select_side.opened .drop {
	transform: scale(1) translate3d(0,0,0);
	-webkit-transform: scale(1) translate3d(0,0,0);
	-moz-transform: scale(1) translate3d(0,0,0);
	-o-transform: scale(1) translate3d(0,0,0);
	-ms-transform: scale(1) translate3d(0,0,0);
	opacity: 1;
	visibility: visible;
}

.select_side .drop:after, .select_side .drop:before {
	bottom:...

JavaScript

$(document).ready(function(){

var i=0;
	
	$(".select_side").each(function(){
		i++;
		$(this).attr("data-name", "select"+i);
	});
	
	$("[data-name=" +i+"]").ready(function(){
		
		var thisAttr = $(this).find(".select").parent();
		
		$(this).find(".select").click(function(event){
			$(this).parent().toggleClass("opened");
		});
		
		$(document).on('click touchstart', function(e){
			if(!$(e.target).closest(thisAttr).length) {
				thisAttr.removeClass("opened");
			}
		});
	});
  
 });