JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    	<h1>Menu Popup</h1>
    	<div class="popup">
        	<input type="text" name="test" value="Silahkan Pilih Menu" class="field" readonly="readonly">
            <ul class="list">
            	<li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </div>
    </div>

CSS

* {margin: 0; padding: 0;}

body {
	font-family: Arial, Helvetica, sans-serif;	
}

#container {
	width: 500px; 
	margin: auto;
	padding-top: 100px;
}

#container h1 {
	margin-bottom: 20px;
	text-transform: uppercase;	
}

#container .popup {
	position: relative;	
}

#container .popup .field {
	width: 300px;
	background-color: #06F;
	color: #CCC;
	padding: 5px;
	cursor: pointer;
	border: none;
	border: 1px solid #06F;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;	
}

#container .popup .field:hover {
	border: 1px solid #CCC;
	-webkit-box-shadow: 0 0 5px 0 #1C1C1C;
	box-shadow: 0 0 5px 0 #1C1C1C;
}

#container .popup>ul.list {
	display: none;
	position: absolute;
	left: 30px;
	top: -30px;
	z-index: 999;
	width: 300px;
	margin: 0;
	list-style: none;
	background: #FFF;
	color: #333;
	-webkit-box-shadow: 0 0 5px 0 #1C1C1C;
	box-shadow: 0 0 5px 0 #1C1C1C;	
}

#container .popup>ul.list li {
	padding: 10px;
	border-bottom: 1px solid #CCC;
	font-size: 12px;	
}

#container .popup>ul.list li:hover {
	background-color: #666;
	color: #900;	
}

#container .popup>ul.list li:list-child {
	border: none;	
}

JavaScript

(function($){
	$.fn.styleddropdown = function(){
		return this.each(function(){
			var obj = $(this)
			obj.find('.field').click(function() { //onclick event, 'list' fadein
			obj.find('.list').fadeIn(400);
			
			$(document).keyup(function(event) { //keypress event, fadeout on 'escape'
				if(event.keyCode == 27) {
				obj.find('.list').fadeOut(400);
				}
			});
			
			obj.find('.list').hover(function(){ },
				function(){
					$(this).fadeOut(400);
				});
			});
			
			obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
			obj.find('.field')
				.val($(this).html())
				.css({
					'background':'#fff',
					'color':'#333'
				});
			obj.find('.list').fadeOut(400);
			});
		});
	};
})(jQuery);

$(function(){
    $('.popup').styleddropdown();
});