JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="selectOptions">
      <select required>
        <option value="1">Um</option>
        <option value="2">Dois</option>
        <option value="3">Três</option>
        <option value="4">Quatro</option>
        <option value="5">Cinco</option>
        <option value="6">Seis</option>
        <option value="7">Sete</option>
        <option value="8">Oito</option>
      </select>
      
      <ul>
      </ul>
			<label class="selecionada"></label>
    </div>

CSS

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: rgb(150,150,150);
}
body {
	font-size: 14px;
}
ul {
	list-style: none;
}

.selectOptions {
	position:relative;
	display:block;
	width:200px;
	height:35px;	
}
.selectOptions select {
	display:none;
}
.selectOptions .selecionada {
	display:block;
	
}
.selectOptions .selecionada:after {
	position: absolute;
	display: block;
	content: "";
	top: 1px;
	right: 1px;
	width: 33px;
	height: 33px;
	background-image: url(../_imgs/setaBaixo.jpg);
}
.selectOptions .selecionada.setaBaixo:after {
	background-image: url(../_imgs/setaBaixo.jpg);
}
.selectOptions .selecionada.setaCima:after {
	background-image: url(../_imgs/setaCima.jpg);
}

.selectOptions ul {
	position:relative;
	display:block;
	width:100%;
	height:0px;
	overflow:hidden;
}
.selectOptions ul li{
	cursor:pointer;
}
.selectOptions ul li:last-child {
	border-bottom: none;
	
}
.selectOptions ul li,
.selectOptions .selecionada {
	position:relative;
	width:94.1%; /*.01 para encobrir os botões abaixo pois estava dando uma abertura com 94% apenas*/
	height:34px;
	line-height:34px;	
	padding:0 3% 0 3%; 
	border-bottom: rgb(200,200,200) 1px solid;
	background-color:rgb(240,240,240);
}

.selectOptions  ul li:hover,
.selectOptions  .selecionada {
	background-color: rgb(200,200,200);
}

JavaScript

$(document).ready(function(e) {

    // entrega o primeiro elemento da select option à div .selecionada
    $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());

    /*popula as li's*/
    $(".selectOptions select > option").each(function() {
        //Não exibe a primeira li pois esta já está sendo exibida na .selecionada
        if ($(this).is(':first-child')) $(".selectOptions ul").append("<li value='" + this.value + "' style='display:none;'>" + this.text + "</li>");
        else $(".selectOptions ul").append("<li style='display:block;' value='" + this.value + "'>" + this.text + "</li>");
    });

    //contador de vezes que abre e fecha a ul
    contador = 0;

    $(".selectOptions .selecionada").click(function(e) {

        quantasLis = $(".selectOptions ul li").length;

        if (contador % 2 == 0) {

            $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
            //$(".selectOptions ul").css("display", "block");
						
            //$(".selectOptions ul li").css("display", "none").slideDown(400);
						$(".selectOptions ul").animate({height:"175px"},500);

/*
            if (quantasLis > 4) {
                $(".selectOptions ul").css('height', '175px');
                $(".selectOptions ul").css("overflow-y", "scroll");
            } else {
								$(".selectOptions ul").css('height', (quantasLis*35)+'px');
                $(".selectOptions ul").css("overflow-y", "auto");
            }

            janela = $(window).height();
			
            selecionadaPosicao = $(".selectOptions .selecionada").offset().top;
            selecionadaAltura = $(".selectOptions .selecionada").height();
            ulAltura = $(".selectOptions ul").height();
            janelaScroll = $(window).scrollTop(); // distância que a página foi rolada
			
            posicaoFinal = ulAltura + $(".selectOptions .selecionada").outerHeight();
			
            total = selecionadaPosicao + selecionadaAltura...