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; min-height: 888px;" 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>
        <form data-mini="true" id="tt_editpane_data">
            <ul class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" id="tt_editpane_ul" data-id="68" data-datatype="malt">
                <li class="ui-field-contain ui-li-static ui-body-inherit" data-fieldname="owner">
                    <p class="ql">
                    </p><span class="qr">
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-mini ui-shadow-inset">
        <input data-mini="true" data-id="68" id="tt_editfield_owner" name="owner" class="tt_editfield_owner tt_watch tt_autocomplete tt_edited" value="Mickael Bille Bj" 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="user">
<li class="ui-first-child ui-last-child" data-itemid="11128">
    <a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">Mickael Bille Bjørn</a>
</li>
</ul>
</div>
    <input data-id="68" id="user_id" data-fname="uid" class="tt_autoindex" data-role="none" value="11128" type="text"/>
    </span>
                </li>
            </ul>
        </form>
        </div>
    </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;
}
#tt_wrapper .ui-bar-a {
    font-size: 0.9em;
    height: 40px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: none;
}
#tt_wrapper .ui-controlgroup {
    margin-top: 0px;
    margin-bottom: 0px;
}
#tt_wrapper .ui-body-a {
    padding: 0px;
    border-top: none;
}
#tt_datatable .ui-btn {
    margin-top: 1px;
    margin-bottom: 1px;
    margin-right: 4px;
}
.tt_ro_form input:disabled {
    color: black;
    opacity: 1;
}
.tt_ro_form .ui-state-disabled {
    opacity: 1;
}
#tt_editpane_ul li.ui-field-contain {
    min-width: 80%;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: visible;
}
#tt_editpane_ul...