JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<span>
    <select name="number" id="number">
        <option>1</option>
        <option selected="selected">2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
    </select>
</span>

CSS

select {
     width: 200px;
     height: 20px;
     padding: 0px;
     margin: 0px;
    font-size: 10px;
 }
 .overflow {
     height: 200px;
 }

JavaScript

$(function () {
     $("#number")
         .selectmenu()
         .selectmenu("menuWidget")
         .addClass("overflow");
 });