JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css">
<select id="area">
  <option value="https://www.google.com">🙂&nbsp;&nbsp;Example</option>
  <option value="https://www.bing.com">😁&nbsp;&nbsp;Another</option>
</select>

CSS

/* Colours */
:root {
	--black:			#000000;
	--white:			#FFFFFF;
	--pale-purple:			#F7F2FF;
	--lighter-purple:		#AD56FD;
	--slightly-lighter-purple:	#8200FF;
	--purple:			#6A00FF;
	--slightly-darker-purple:	#5500CC;
}

/* Dropdown menus - closed */
.ui-selectmenu-button {
	background-color:	var(--white) !important;
	border	:		3px solid var(--slightly-darker-purple) !important;
	border-radius:		15px !important;
	color:			var(--black) !important;
	font-size:		15px !important;
	line-height:		16px !important;
	margin:			initial !important;
	padding:		7px 5px 7px 10px !important;
	width:			initial !important;
}

/* Dropdown menus - open */
.ui-menu {
	border:			3px solid var(--slightly-darker-purple) !important;
	border-radius:		15px !important;
	padding:		initial !important;
	position:		relative;
	top:			-2px;
	width:			initial !important;
}

/* Dropdown menus - options - all states */
.ui-menu-item-wrapper {
	color:			var(--black);
	font-size:		15px;
	line-height:		20px;
	padding:		6px 10px !important;
}

/* Dropdown menus - options - hover state */
.ui-menu-item-wrapper.ui-state-active {
	background-color:	var(--pale-purple) !important;
	border:			initial !important;
	color:			var(--purple) !important;
	margin:			initial !important;
}

/* Dropdown menus - separator - jQuery UI */
.ui-menu-item {
	border-bottom:		1px solid var(--slightly-darker-purple) !important;
}

/* Dropdown menus - last separator - jQuery UI */
.ui-menu-item:last-child {
	border-bottom:		initial !important;
}

JavaScript

function collapseAreaDropdown() {
	$('#area-button .ui-selectmenu-text').css('width', '18px');
}

$('#area').selectmenu({
  //appendTo:	'.wy-breadcrumbs li:first-child'
});

collapseAreaDropdown();

$('#area').on('selectmenuselect', function() {
  collapseAreaDropdown();
  window.location = $(this).val();
});