JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.js"></script>

    <link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" />
    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>        
        
</head>

<body onload="setAutoComplete()">

<div id="pageA" data-role="page">

    <div data-role="header">
        <h1>Page A</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <form id="myForm" data-ajax="false">
            <input type="text" id="tags" />
            <fieldset class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="button" id="myFormSubmit" value="Submit" data-theme="b" onclick="alert('The Submit Button has been clicked');" />
                </div>
                <div class="ui-block-b">
                    <input type="reset" id="myFormReset" value="Reset" data-theme="c" />
                </div>
            </fieldset>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
    
<div id="pageB" data-role="page">

    <div data-role="header">
        <h1>Page B</h1>
...

CSS

.ui-autocomplete{max-height:50px;overflow:auto}

JavaScript

$(function() {
   var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags,
        open:function(event, ui) {
          $('.ui-autocomplete')
          .addClass('scroll-pane')
          .jScrollPane();

           $('.jScrollPaneContainer').css({
           'position': 'absolute',
           'top': ($(this).offset().top + 
                   $(this).height() + 5) + 'px',
           'left': $(this).offset().left + 'px'
              });
           },
       close: function(event, ui) {
             $('.scroll-pane').jScrollPaneRemove();
         }          
    });
});