JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
        
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/css/sm-core-css.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/css/sm-simple/sm-simple.css">
  
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/jquery.smartmenus.js"></script>
  </head>
  
  <body>
    <ul class="sm sm-simple" id="menu">
      <li>
        <a>Search</a>
        <ul>
          <li>
            <div>Enter a city:<br> <!-- problem 1: cannot use <a> here -->
              <input id="input"><br>
              <input type="button" value="Send"> <!-- problem 2: z-index of autocomplete menu is too low, so it cannot be seen -->
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

JavaScript

$(function() {
        $('#menu').smartmenus({
          showOnClick: true,
          hideOnClick: true // problem 3: as the autocomplete menu is outside of the sm, a click on it closes the sm, though I want it to stay open
        });
        $('#input').autocomplete({source: ['Athens', 'Avarua', 'Baghdad', 'Bangkok', 'Beijing', 'Beirut', 'Berlin', 'Bern']});
      });