JSFiddle - React, Tailwind, and code Playground

HTML

<div class="primary form-styles">
    <div class="row">    
        <div class="form">
            <form id="form" action="#">
                <div class="fieldset-standard row">
                    <fieldset>
                        <div class="fieldset-grouping inline selects">
                            <h3>Multi-select</h3>
                            <select multiple="multiple" class="ms-modal" name="multiselect">
                                <option name="Option 6" value="o6">Option 6</option>
                                <option name="Option 7" value="o7">Option 7</option>
                                <option name="Option 8" value="o8">Option 8</option>
                                <option name="Option 9" value="o9">Option 9</option>
                                <option name="Option 10" value="o10">Option 10</option>
                            </select>
                            <div class="multiselect-overlay"></div>
                            <div class="multiselect multiselect-modal"></div>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

body {
    font-family: "helvetica neue", helvetica, arial, sans-serif;
    font-size: 14px;
    }

/* Multiselect & Select */ 
       div.multiselect-dropdown-container {
           background: none repeat scroll 0 0 #EFEFEF;
        border: 1px solid #CCCCCC;
        border-radius: 15px 15px 15px 15px;
        margin: 0 auto;
        overflow: hidden;
        width: 300px;
           }
           ul.multiselect-dropdown-options {
               list-style: none;
               margin: 0;
               padding: 0;
               }
           ul.multiselect-dropdown-options li {
               background: none repeat scroll 0 0 #DDDDDD;
            border-bottom: 1px solid #BBBBBB;
            border-top: 1px solid #FFFFFF;
            font-size: 1em;
            font-weight: bold;
            list-style: none outside none;
            margin: 0;
            padding: 15px 10px 17px 25px;
            position: relative;
            text-align: left;
            text-shadow: 0 1px 0 #FFFFFF;
               }
               
               a.remove-option {
                   background: none repeat scroll 0 0 #EFEFEF;
                cursor: pointer;
                display: block;
                float: right;
                height: 30px;
                position: absolute;
                right: 10px;
                top: 10px;
                width: 30px;
                   }
               
           div.multiselect-dropdown {
               background: url("http://www.simplefocus.com/work/serviceu/myserviceu/kiosk-new/images/kiosk/dropdown.gif") no-repeat scroll right 11px #EFEFEF;
            border-radius: 0px 0px 15px 15px;
            box-shadow: 0 2px 0 #FFFFFF inset;
            cursor: pointer;
            margin: 0 auto;
            overflow: hidden;
            text-align: left;
            width: 265px;
            color: #888888;
            font-size: 1em;
            font-weight: bold;
            padding: 15px 10px 17px 25px;
           ...

JavaScript

// Multiselect (Modal)
    $('select.ms-modal[multiple="multiple"]').each(function() {
        var name = $(this).attr('name');
        multiselectmodal = $(this);

        $('.multiselect-modal').wrap('<div class="multiselect-container row"><div class="select-scrollable-container tencol"><div class="scrollable scrollable-content scrollable-content-' + name + '"></div></div></div>');
        $('.multiselect-container').append('<a href="#" class="control-finished control-finished-' + name + ' tencol linkButton">Finished</a>');
        $(this).after('<div class="multiselect-dropdown-container"><ul class="multiselect-dropdown-options multiselect-dropdown-options-' + name + '"></ul><div class="multiselect-dropdown">Choose your options</div></div>');
        $('<div class="select-scrollable-header">Choose an option</div>').insertBefore('.multiselect-modal');
        $('<div class="select-scrollable-footer"></div>').insertAfter('.multiselect-modal');


        // Count the number of options and apply size to the select.
        var count = $("option", this).length;
        $(this).attr('size', count);

        // Find each option
        $(this).find('option').each(function() {
            var value = $(this).attr('value');
            var name = $(this).attr('name');
            var optiontext = $(this).text();

            $('<div id=' + value + ' class="option option-' + value + '">' + optiontext + '</div>').appendTo('.multiselect-modal');
        });
    });

    $('div.option').click(function() {
        var value = $(this).attr('id');
        var option = $('option[value=' + value + ']');
        var optiontext = $(this).text();
        
        option.prop("selected", !option.prop("selected"));
        $(this).toggleClass('selected');
        if ($(this).hasClass('selected')) {
            $('ul.multiselect-dropdown-options').append('<li id="' + value + '" class="dropdown-option drop-down-option-' + value + '">' + optiontext + '<a...