JSFiddle - React, Tailwind, and code Playground

by needlethread

HTML

<!DOCTYPE html>
<body style="margin-top: 0px;" class="ui-mobile-viewport ui-overlay-a">

<div style="padding-top: 45px;" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-active" tabindex="0" data-url="tt_wrapper" id="tt_wrapper" data-role="page">
 
  

<div class="ui-grid-d ui-responsive">
 <div class="ui-block-a">
 <div class="ui-input-text ui-body-inherit ui-corner-all ui-mini ui-shadow-inset">
     <input data-mini="true" data-id="73552" id="tt_editfield_malt" name="malt" class="tt_watch tt_autocomplete tt_edited" value="Malt"  type="text"/>
     </div>
     <div class="tt_autocomplete_wrap">
         <ul class="jqm_autocomplete ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" data-ftype="malt">
             <li class="ui-first-child" data-itemid="2">
                 <a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">Chocolate</a>
             </li>
       
</ul>
</div>
     <input data-id="73552" id="malt_id" data-fname="malt_id" class="tt_autoindex" data-role="none" value="45" type="text"/></div> <!-- ui-block-a -->
 <div class="ui-block-b">
 </div> <!-- ui-block-b -->
 <div class="ui-block-c">
 </div> <!-- /ui-block-c -->
 <div class="ui-block-d">
 </div> <!-- ui-block-d -->
</div>


  
</div> <!-- tt_wrapper -->

<!-- area for storing chunks of DOM HTML for use by JS routines -->
<div id="tt_templates" style="display: none;">
</div>

CSS

.tt_autocomplete_wrap {
  position: relative; }

.jqm_autocomplete {
  /*position: absolute;*/
  z-index: 120000;
  border: 3px solid black; 
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button, input, select, textarea {
  font-size: 100%;
  overflow: visible;
  margin: 0;
  vertical-align: baseline;
  width: auto; }

textarea {
  overflow: auto;
  vertical-align: text-top; }


html {
  height: 90%; }

body {
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  background: white;
  color: #555555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-smoothing: antialiased;
  line-height: 1.5em;
  text-rendering: optimizeLegibility; }

p {
  word-wrap: break-word; }

.tt_autoindex {
  display: none; }