JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fieldset-grouping inline selects-modal">
    <h3>Select (Modal)</h3>
    
    
    <select class="modal" name="select" style="height: 100px;">
        <option name="Option 1" value="o1">Option 1</option>
        <option name="Option 2" value="o2">Option 2</option>
        <option name="Option 3" value="o3">Option 3</option>
        <option name="Option123456789WWWWW" value="o4">Option123456789WWWWW</option>
        <option name="Option 5" value="o5">Option 5</option>
        <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>
        <option name="Option 11" value="o11">Option 11</option>
        <option name="Option 12" value="o12">Option 12</option>
        <option name="Option 13" value="o13">Option 13</option>
        <option name="Option 14" value="o14">Option 14</option>
        <option name="Option 15" value="o15">Option 15</option>
        <option name="Option 16" value="o16">Option 16</option>
        <option name="Option 17" value="o17">Option 17</option>
        <option name="Option 18" value="o18">Option 18</option>
        <option name="Option 19" value="o19">Option 19</option>
        <option name="Option 20" value="o20">Option 20</option>
    </select>
    
</div>

<div class="fieldset-grouping inline selects-normal">
    <h3>Select (Normal)</h3>

    <select class="normal" name="select-2">
        <option name="Option 21" value="o21">Option 21</option>
        <option name="Option 22" value="o22">Option 22</option>
        <option name="Option 23" value="o23">Option 23</option>
        <option name="Option 24" value="o24">Option 24</option>
        <option name="Option 25" value="o25">Option 25</option>
    </select>
    
</div>

<div class="fieldset-grouping inline multiselects-normal">
   ...

CSS

/* 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: 1.2em;
            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: url("http://simplefocus.com/work/serviceu/myserviceu/kiosk-new/images/kiosk/x.gif") repeat scroll 0 0 transparent;
                cursor: pointer;
                display: block;
                float: right;
                height: 30px;
                position: absolute;
                right: 15px;
                text-indent: -9999px;
                top: 10px;
                width: 30px;
                   }
                   ul.multiselect-dropdown-options li:hover a.remove-option,
                   ul.multiselect-dropdown-options li:active a.remove-option {
                       background-position: center bottom;
                       }
               
           div.multiselect-dropdown {
               background: url("http://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;
 ...

JavaScript

// Select
    
    $('select.normal').each(function(){
        var name = $(this).attr('name');
        var select = $(this);
        $(this).after('<div class="select select-normal select-normal-'+name+'"></div>');
        
        // Count the number of options and apply size to the select.
        var count = $("option", this).length;
        $(this).attr('size',count);
        
        // Add blank option at the top
        $('<option selected="selected" name="Option 0" value=""></option>').prependTo(this);
        
        // Find each option
        $('option', this).each(function (index, option) {
            var value = $(this).attr('value');
            var name = $(this).attr('name');
            var text = $(this).text();
            var option = $('select.normal option[value='+value+']');
            
            $('<div class="option option-'+value+'">'+text+'</div>').appendTo('.select-normal');
            $('option[value='+value+']:selected').removeClass('selected');
            $('option[value='+value+']:not(:selected)').addClass('selected');    
            
            $('div.select-normal div.option-'+value+'').click(function() { 
                console.log(option);
                console.log($(this));
                            
                option.prop("selected", "selected");
                $('div.select-normal div.option').removeClass('selected');
                $(this).toggleClass('selected');
            });
        });
        
        
    });



    // Select (Modal)
    
    $('select.modal').each(function(){
        var name = $(this).attr('name');
        var select = $(this);
        
        // Create the modal
        $('.selects-modal').after('<div class="select-overlay select-overlay-'+name+'"></div>')
        $('.selects-modal').after('<div class="select select-modal select-modal-'+name+'"></div>');
        
        $('.select-modal').wrap('<div class="select-container row"><div class="select-scrollable-container...