JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div id="miniFilter">
	<select name="" class="custom-select" tabindex="-1" id="select-prumer" data-prefix="Ráfek: ">
	  <option value="" selected>Filtruj</option>
    <option value="1">13"</option>
    <option value="2">14"</option>
	</select>
</div>

CSS

.custom-select { display: none;}
.dropdown-container { position: relative;}
.dropdown-select { z-index: 200; padding: 1.4rem; text-align: left; font-size: 1.8rem; line-height: 1;
  cursor: pointer; transition: background-color 0.2s ease;}
.dropdown-select:before { float: right; transition: 0.3s ease;}
.active .dropdown-select:before { transform: rotate(180deg);}
.dropdown-select-ul { padding: 0; display: none; z-index: 100; position: absolute; width: 100%; max-height:50vh;overflow: scroll; overflow-y: auto; overflow-x: hidden; text-align: left;}
.dropdown-select-ul li { display: block; padding: 0.7rem 1.4rem; cursor: pointer;}
.dropdown-select-ul li.selected { cursor: default;}
.active .dropdown-select-ul { display: block; animation-fill-mode: both; animation-duration: 0.3s; animation-name: fadeIn;}
.no-js .custom-select { display: block;}
.no-js .dropdown-select,
.no-js .dropdown-select-ul { display: none;}
.dropdown-select { background-color: #bdc3c7; color: #ecf0f1;}
.dropdown-select:hover,
.dropdown-select:focus { background-color: #34495e;}
.active .dropdown-select { background-color: #34495e;}
.dropdown-select-ul { border-color: #34495e; background: #ecf0f1; color: #34495e;}
.dropdown-select-ul li:hover,
.dropdown-select-ul li:focus { background: #e3e9eb;}
.dropdown-select-ul li.selected { background: #dae2e4; color: #34495e;}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

JavaScript

// Code By Webdevtrick ( https://webdevtrick.com )
(function($){
	var customSelect = $('select.custom-select');
  var prefix = $('select.custom-select').attr('data-prefix'); //+hap
	// FIRST, create the custom select menus from the existing select
	customSelect.each(function() {
		var that = $(this);
		var listID = that.attr('id'),
		groups = that.children('optgroup'),
			theOptions = "",
			startingOption = "",
			customSelect = "";
		//check if there are option groups 
		if(groups.length) {
			groups.each(function() {
				var curGroup = $(this);
				var	curName = curGroup.attr('label');
				//Open the option group
				theOptions += '<li class="optgroup">' + curName + '</li>';
				//get the options
				curGroup.children('option').each(function() {
					var curOpt = $(this);
					var curVal = curOpt.attr('value'),
						curHtml = curOpt.html(),
						isSelected = curOpt.attr('selected');
					if(isSelected === 'selected') {
						startingOption = curHtml;
						theOptions += '<li class="selected" data-value="' + curVal + '">' + curHtml + '</li>';
					}else {
						theOptions += '<li data-value="' + curVal + '">' + curHtml + '</li>';
					}
				});
				//Close the option group
				//theOptions += '<li class="optgroup-close"></li>';
			});
			//add options not in a group to the top of the list
			that.children('option').each(function() {
				var curOpt = $(this);
				var curVal = curOpt.attr('value'),
					curHtml = curOpt.html(),
					isSelected = curOpt.attr('selected');
				if(isSelected === 'selected') {
					startingOption = curHtml;
					theOptions = '<li class="selected" data-value="' + curVal + '">' + curHtml + '</li>' + theOptions;
				}else {
					theOptions = '<li data-value="' + curVal + '">' + curHtml + '</li>' + theOptions;
				}
			});
		} else {
			that.children('option').each(function() {
				var curOpt = $(this);
				var curVal = curOpt.attr('value'),
					curHtml = curOpt.html(),
					isSelected = curOpt.attr('selected');
				if(isSelected ===...