JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css">
<script src="http://view.jqueryui.com/selectmenu/jquery-1.10.2.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/demos/demos.css">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#speed" ).selectmenu();
$( "#files" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
$( "#salutation" ).selectmenu();
$('#openselect').click(function(){
$( "#salutation" ).selectmenu('open');
})
} );
</script>
</head>
<body>
<div class="demo">
<form action="#">
<input type="button" value="123" id="openselect"/>
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" id="speed">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
...