JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>


	<body>
		<div id="searchDiv">
			<label for="suggestions"></label>
			<input list="suggestionInput" id="suggestions" name="ice-cream-choice" />
		</div>
	</body>

CSS

html, body { height: 100%; width: 100%;  }

#suggestions{
  width:50%;
  height:4vh;
  margin: 25% 0 0 30%;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

JavaScript

$(document).ready(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"
  ];
  $("#suggestions").autocomplete({
    source: availableTags
  });

});