JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Input completionbs</title>
</head>
<body>
    <h1>Example of input completion from Eclipse Orion</h1>
    <hr>
    <div>
        <h2>Click on the empty input field below to see a full list of proposals.</h2>
        <h2>Type something to see how they are filtered.</h2>
        <input id="inputExample"></input>
    </div>
</body>
</html>

CSS

.inputCompletionContainer {
    color: black;
    display: block;
    border:  1px solid #666;
    background: white;
    max-height: 300px;
    max-width: 300px;
    min-width: 150px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    z-index:200;
}

.inputCompletionUL {
    list-style : none;
    margin: 0;
    padding: 0;
}

.inputCompletionLISelected {
    background : #ffeecc;/*#0080ff;*/
}

.inputCompletionLICategory {
    font-weight: bold;
}

.inputCompletionLINormal {
    background : white;
}

JavaScript

/* The inputCompletion class is based on purely javascript and html, used generically in Orion's search completion and   other input fields. The caller only needs to provide a proposal list with categories.*/

function InputCompletion(inputFieldOrId, binderFunc, options) {
    this._inputField = inputFieldOrId;
    if (typeof(this._inputField) === "string") { //$NON-NLS-0$
        this._inputField = document.getElementById(this._inputField);
    }
    this._binderFunc = binderFunc;
    var idFrefix = options ? options.group : null;
    if (!idFrefix) {
        if (this._inputField.id) {
            idFrefix = this._inputField.id;
        } else {
            idFrefix = "default__input__group"; //$NON-NLS-0$
        }
    }
    this._completionIdPrefix = idFrefix + "__completion__"; //$NON-NLS-0$
    this._proposeFromStart = options ? options.proposeFromStart : false;
    this._extendedProvider = options ? options.extendedProvider : null;
    this._proposalIndex = -1;
    this._dismissed = true;
    this._mouseDown = false;
    this._initUI();

    var that = this;
    this._completionUIContainer.addEventListener("mousedown", function(e) {
        that._mouseDown = true;
    });
    this._completionUIContainer.addEventListener("mouseup", function(e) {
        that._mouseDown = false;
    });
    this._inputField.addEventListener("blur", function(e) {
        if (that._mouseDown) {
            window.setTimeout(function() { //wait a few milliseconds for the input field to focus 
                that._inputField.focus();
            }, 200);
        } else {
            that._dismiss();
        }
    });
    this._inputField.addEventListener("keydown", function(e) {
        that.onKeyDown(e);
    });
    this._inputField.addEventListener("input", function(e) {
        that._proposeOn(that._inputField.value);
    });
    this._inputField.addEventListener("focus", function(e) {
        if (!that._dismissed || !that._binderFunc) {
            return;
        }
       ...