JSFiddle - React, Tailwind, and code Playground

HTML

<select name="Items" id="Items">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

CSS

div.selectbox-wrapper {
    position:absolute;
    width:400px;
    background-color:#000;
    color:#fff;
    margin:0px;
    margin-top:-10px;
    padding:0px;
    text-align:left;
    max-height:100px;
    overflow:auto;
}

 div.selectbox-wrapper ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

 div.selectbox-wrapper ul li.selected {
    background-color: #CDD8E4;
    color:#000;
}

 div.selectbox-wrapper ul li.current {
    background-color: #CDD8E4;
    color:#f00;
}

 div.selectbox-wrapper ul li {
    list-style-type:none;
    display:block;
    margin:0;
    padding:2px;
    cursor:pointer;
}

 .selectbox {
    margin: 0px 5px 10px 0px;
    padding-left:2px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:1em;
    width : 180px;
    display : block;
    text-align:left;
    background: #000;
    cursor: pointer;
    border:1px solid #D1E4F6;
    color:#fff;
}

JavaScript

$(document).ready(function () {
    $('#Items').selectbox();
});


jQuery.fn.extend({
    selectbox: function (options) {
        return this.each(function () {
            new jQuery.SelectBox(this, options);
        });
    }
});


if (!window.console) {
    var console = {
        log: function (msg) {}
    }
}

jQuery.SelectBox = function (selectobj, options) {

    var opt = options || {};
    opt.inputClass = opt.inputClass || "selectbox";
    opt.containerClass = opt.containerClass || "selectbox-wrapper";
    opt.hoverClass = opt.hoverClass || "current";
    opt.currentClass = opt.selectedClass || "selected"
    opt.debug = opt.debug || false;

    var elm_id = selectobj.id;
    var active = -1;
    var inFocus = false;
    var hasfocus = 0;
    //jquery object for select element
    var $select = $(selectobj);
    // jquery container object
    var $container = setupContainer(opt);
    //jquery input object 
    var $input = setupInput(opt);
    // hide select and append newly created elements
    $select.hide().before($input).before($container);


    init();

    $input.click(function () {
        if (!inFocus) {
            $container.toggle();
        }
    })
        .focus(function () {
        if ($container.not(':visible')) {
            inFocus = true;
            $container.show();
        }
    })
        .keydown(function (event) {
        switch (event.keyCode) {
            case 38:
                // up
                event.preventDefault();
                moveSelect(-1);
                break;
            case 40:
                // down
                event.preventDefault();
                moveSelect(1);
                break;
                //case 9:  // tab 
            case 13:
                // return
                event.preventDefault(); // seems not working in mac !
                $('li.' + opt.hoverClass).trigger('click');
                break;
            case 27:
                //escape
                hideMe();
      ...