JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sel_wrap">
							<div class="sel_imul sel_year">             
								<div class="sel_selected">                    
									<div class="selected-text">Year</div><div class="sel_arraw"></div>
								</div> 
								<div class="sel_options">
									<div class="sel_option" value="2013">2013</div>
									<div class="sel_option" value="2014">2014</div>
									<div class="sel_option" value="2015">2015</div>
									<div class="sel_option" value="2016">2016</div>
									<div class="sel_option" value="2017">2017</div>
									<div class="sel_option" value="2018">2018</div>
									<div class="sel_option" value="2019">2019</div>
									<div class="sel_option" value="2020">2020</div>
								</div>
							</div>
							<select id="c_year" name="c_year">
								<option value="2013">2013</option>
								<option value="2014">2014</option>
								<option value="2015">2015</option>
								<option value="2016">2016</option>
								<option value="2017">2017</option>
								<option value="2018">2018</option>
								<option value="2019">2019</option>
								<option value="2020">2020</option>
							</select>
						</div>
								<div class="sel_wrap">
									<div class="sel_imul">             
										<div class="sel_selected">                    
											<div class="selected-text">Month</div><div class="sel_arraw"></div>
										</div> 
										<div class="sel_options">
											<div class="sel_option" value="01">Январь</div>
											<div class="sel_option" value="02">Февраль</div>
											<div class="sel_option" value="03">Март</div>
											<div class="sel_option" value="04">Апрель</div>
											<div class="sel_option" value="05">Май</div>
											<div class="sel_option" value="06">Июнь</div>
											<div class="sel_option" value="07">Июль</div>
											<div class="sel_option" value="08">Август</div>
											<div class="sel_option" value="09">Сентябрь</div>
											<div class="sel_option"...

CSS

.sel_wrap {
	display:inline-block;
	font-family: 'Open Sans', sans-serif;
	color:#979183;
	margin-right:5px;
}
.sel_wrap select{
    display:none;
}
.sel_imul {
    width:150px;
}
.sel_imul.sel_year {
    width:100px;
}
.sel_imul.sel_day {
    width:90px;
}
.sel_imul.sel_year {
    width:100px;
}
.sel_imul .sel_selected{
    background:#fff;
    border:1px solid #e9e5de;
    padding:10px 12px;
    font-size:14px;
    cursor:pointer;
    position:relative;
}
.sel_imul.act .sel_selected{
}
.sel_selected .sel_arraw{
    height:100%;
    width:38px;
    background:url(images/arr.png) 50% 50% no-repeat;
    position:absolute;
    top:0px;
    right:0px;  
	border-left:1px solid #e9e5de;  
}
.sel_imul:hover .sel_selected .sel_arraw{
    /*background-color:#cbebea;
    border-left:1px solid #e9e5de;*/
}
.sel_imul.act .sel_selected .sel_arraw{
   /* background-color:#abcdcc;
    border-left:1px solid #e9e5de;*/
}
.sel_imul .sel_options {
    background:#fff;
    border:1px solid #e9e5de;
    border-top:none;
    overflow:auto;
    position:absolute;
    width:148px;
    display:none;
	height:150px;
    z-index:10;
}
.sel_imul.sel_year .sel_options {
    width:98px;
}
.sel_imul.sel_day .sel_options {
    width:88px;
}
.sel_options .sel_option{
    padding:3px 4px;
    font-size:14px;
    border:1px solid #fff;
    border-right:none;
    border-left:none;
}
.sel_options .sel_option:hover{
	border-color:#cbebea;
	cursor:pointer;
}
.sel_options .sel_option.sel_ed{
	background:#cbebea;

}

JavaScript

jQuery(document).ready(function($){
    $('.sel_imul').on('click', function() {
		$('.sel_imul').removeClass('act');
		$(this).addClass('act');
	
		if ($(this).children('.sel_options').is(':visible')) {
			$('.sel_options').hide();
		} else {
			$('.sel_options').hide();
			$(this).children('.sel_options').show();
		}
	});
	$('.sel_option').on('click', function() {
		//меняем значение на выбранное
		var tektext = $(this).html();
		$(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);
		
		//активируем текущий
		$(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
		$(this).addClass('sel_ed');
		
		//устанавливаем значение для селекта
		var tekval = $(this).attr('value');
		tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
		$(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
			if ($(this).val() == tekval) {
				$(this).attr('selected', 'select');
			}
		});
		
		/* Смена дней в зависимости от месяца. */
		if($(this).parents('.sel_wrap').find('select').is("#c_month") || $(this).parents('.sel_wrap').find('select').is("#c_year")){
			var year = $('#c_year option[selected="selected"]').val();
			var month = $('#c_month option[selected="selected"]').val();
			if(month > 0 && year > 0){
				var dayCount = new Date(year, month, 0).getDate();
				var thpar = $('#c_day').parent('.sel_wrap').find('.sel_options');
				thpar.html('');
				$('#c_day').html('');
				for(var i = 1; i <= dayCount; i++){
					thpar.append('<div class="sel_option" value="'+i+'">'+i+'</div>');
					$('#c_day').append('<option value="'+i+'">'+i+'</option>');
				}
			}
		}
	});
		
	var selenter = false;
	$('.sel_imul').on('mouseenter', function() {
		selenter = true;
	});
	$('.sel_imul').on('mouseleave', function() {
		selenter = false;
	});
	jQuery(document).click(function() {
		if (!selenter)...