JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--
My select solution need only a few html lines.
It has an option to include a search box, so the user can filter the content.
Straight to the point, no weird containers, no unusale elements, no html clutter. Just a container div and one div for each option. Jquery and css does all the magic
Created form scratch by Pablo Werlang - pswerlang@gmail.com
-->
<div class='select search' id='sel1'>
  <div class='item'>This</div>
  <div class='item'>is a</div>
  <div class='item'>select</div>
  <div class='item'>with many</div>
  <div class='item'>option</div>
  <div class='item'>and a </div>
  <div class='item'>search</div>
  <div class='item'>box</div>
  <div class='item'>And here is a really huge option. Hope you enjoy!</div>
</div>

<div class='select' id='sel2'>
  <div class='item'>Select</div>
  <div class='item'>with</div>
  <div class='item'>no search box</div>
</div>

CSS

/*sets the width of the element*/

#sel2,
#sel1 {
  width: 300px;
  margin-bottom: 20px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(255, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.select {
  cursor: pointer;
  display: block;
  box-shadow: 1px 1px 2px 0px #000;
  font-family: sans-serif;
  font-size: 16px;
}

.select .selected {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 15px 5px 10px;
  width: 100%;
  border: 1px solid black;
  border-radius: 3px;
  box-sizing: border-box;
  background-image: url(https://s13.postimg.org/gcbinjsp3/select_arrow.png);
  background-size: 20px 30px;
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-color: white;
  box-shadow: -35px 0px 15px -15px rgba(128, 128, 128, 0.2) inset;
}

.select .container {
  display: none;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white;
  position: absolute;
  box-shadow: 1px 1px 2px 0px #000;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  width: inherit;
  box-sizing: border-box;
  margin-top: -2px;
}

.select .item-wrapper {
  display: block;
  width: inherit;
  box-sizing: border-box;
  white-space: normal;
  overflow-x: hidden;
  max-height: 11em;
  height: 100%;
  padding: 1px;
}

.select .item {
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0);
  display: none;
}

.select .item:hover {
  background-color: #e5553f;
  color: white;
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: 3px;
}

.select .item-search {
  width: inherit;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
}

.select .item-search .red-input {
  margin: 0px 10px;
  flex: 1;
  width: 100%;
  height: 25px;
 ...

JavaScript

$(document).ready(function() {
  //cria elementos auxiliares
  $('.select').wrapInner("<div class='item-wrapper'></div>");
  $('.select').wrapInner("<div class='container'></div>");
  $('.select .container').before("<div class='selected'></div>");
  $('.select.search .item-wrapper').before("<div class='item-search'><input type='text' class='red-input'></div>");

  //evento do input
  $('.select .item-search .red-input').on('input', function() {
    var obj = $(this).parents('.select');
    var texto = tira_acentos($(this).val().toLowerCase());
    obj.find('.item').removeAttr('style');
    obj.find('.item').each(function() {
      var conteudo = tira_acentos($(this).html().toLowerCase());
      if (conteudo.includes(texto))
        $(this).show();
    });
  });

  //abre a caixa
  $('.select .selected').click(function() {
    var obj = $(this).parents('.select');
    obj.find('.container').slideDown(100);
    obj.find('.item-search .red-input').val("");
    obj.find('.item').show();
    obj.find('.item-search .red-input').focus();
  });

  //seleciona um item da caixa
  $('.select .item').click(function() {
    var obj = $(this).parents('.select');
    $('.select .container').fadeOut(200);
    obj.find('.selected').html($(this).html());
    obj.attr('data-value', $(this).attr('data-value'));
    obj.change();
  });

  //clica fora da caixa
  $(window).click(function(e) {
    var obj = $(e.target).parents('.select');
    if (obj.length == 0)
      $('.select .container').fadeOut(200);
    else {
      $('.select').each(function() {
        if (!$(this).is(obj)) {
          $(this).find('.container').fadeOut(200);
        }
      });
    }
  });

  //inicialmente, seleciona o primeiro item da caixa
  $('.select').each(function() {
    $(this).find('.item').eq(0).click();
  });
});

function tira_acentos(str) {
  var mapa = [{
    'base': 'A',
    'letters':...