JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Сам вывод select в самом низу вкладки JavaScript --!>
<div id="arr" style="display: none">[0, '- Не выбрано -'], [1, 'Значение 1]</div>
<div id="test"></div>

CSS

* {
 margin: 0;
 padding: 0;
}

body {
 background: #ffffff;
 font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
 font-weight: normal;
 font-size: 11px;
 color: #444444;
 line-height: 1;
 margin: 10px;
}

.select {
 background: #ffffff;
 
}

.select .title {
 border: 1px solid #C0CAD5;
 overflow: hidden;
 line-height: 1;
 width: 100%;
 height: 20px;
 cursor: default;
}

.select .title .select_title_wrap {
 float: left;
}

.select .show {
 display: inline-block;
}

.select.show .title {
 display: block;
}

.select .title .select_title {
 padding: 4px 6px; 
}

.select .title .upnarrow {
 float: right; 
}

.select .title .upnarrow_wrap {
 background: #ffffff;
 border-left: 1px solid #ffffff;
 height: 20px;
 padding-top: 3px;
 padding-left: 5px;
 padding-right: 5px;
}

.select.show .upnarrow_wrap {
 background: #dae2ea !important;
 border-left: 1px solid #C0CAD5 !important;
}

.select .title .upnarrow_wrap.active {
 background: #dae2ea;
 border-left: 1px solid #C0CAD5;
}

.select .title .upnarrow_wrap:hover {
 background: #dae2ea;
 border-left: 1px solid #C0CAD5;
}

.select .title .upnarrow_wrap .upnarrow_img {
 display: inline-block;
 background: url('../images/darr_dd_out.gif') no-repeat;
 width: 7px;
 height: 4px;
}

.select.show .list {
 display: block !important;
}

.select .list {
 z-index: 2000;
 display: none;
 position: absolute;
 width: 100%;
 background: #ffffff;
 border: 1px solid #C0CAD5;
 border-top: none !important;
}

.select .list .navigate {

}

.select .list .navigate a {
 display: block;
 text-decoration: none;
 outline: none;
 color: #444444;
}

.select .list .navigate div {
 line-height: 1;
 height: 13px;
 padding: 3px;
 padding-left: 10px !important;
}

.select .list .navigate div.active {
 background: #6083a5;
 border: 1px solid #346089;
 color: #ffffff !important;
 margin: -1px;
}

.select .list .navigate a:hover {
 background: #6083a5;
 border: 1px solid #346089 !important;
 color: #ffffff;
 margin: -1px;
}

JavaScript

var select = {
 _new: function(id, obj, list) {
  var active_select = list[list.length - 1];
  template_list = '';
  
  if(active_select > -1) {
   var length_list = list.length - 1;
   var title_select = list[active_select][1];
   var value_select = active_select;
  } else {
   var length_list = list.length;
   var title_select = list[0][1];
   var value_select = 0;
  } 
  
  for(i = 0; i < length_list; i++) {
   var key = list[i][0];
   var value = list[i][1];
   template_list += '\
    <a class="select_value_'+key+'" href="javascript://"><div>'+value+'</div></a>\
   ';
  }
  
  template_select = '\
   <div id="select_'+id+'" class="select" style="width: '+obj.width+'px;">\
    <div class="title">\
     <div class="select_title_wrap"><div class="select_title">'+title_select+'</div></div>\
     <div class="upnarrow"><div class="upnarrow_wrap"><div class="upnarrow_img"></div></div></div>\
    </div>\
    <div style="width: '+obj.width+'px" class="list">\
     <div class="navigate">'+template_list+' <span class="navigate_append"></span></div>\
    </div>\
   </div>\
   <input value="'+value_select+'" type="hidden" id="select_value_'+id+'">\
   <input type="hidden" id="select_value_h_'+id+'">\
   \
  ';
  $('#'+id).html(template_select);
  
  $('#select_'+id).find('.title').click(function() {
   select._get(id, 'opened') ? select._closed(id) : select._show(id);
   value_id = select._get(id, 'value');
   value_id ? $('#select_'+id).find('.select_value_'+value_id+' div').addClass('active') : $('#select_'+id).find('.select_value_0 div').addClass('active');
  });
  $('#select_'+id).find('.navigate a').click(function() {
   // получаем значение активированного пункта
   var value_select = $(this).attr('class').match(/([0-9]+)/);
   var value_select_result = value_select[1];
   // заносим значение в input
   $('#select_value_'+id).val(value_select_result);
   // присваиваем class активному пункту
   $('#select_'+id).find('.navigate a').find('div').removeClass('active');
...