JSFiddle - React, Tailwind, and code Playground

HTML

<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
    <optgroup>
        <option value="1" style="padding: 10px;">Option a 1</option> </optgroup>       <optgroup>
                    <option value="2" SELECTED >Option b 2(sel)</option>
                    <option value="3">Option c 3</option>
    </optgroup>
    <optgroup>
                    <option value="4" SELECTED >Option d 4 (sel)</option>
                    <option value="5">Option e 5</option>
                    <option value="6">Option f 6</option>
                    <option value="7">Option g 7</option>
                    <option value="8">Option h 8</option>
                    <option value="9">Option i 9</option>
</optgroup>
                    <option value="10" SELECTED >Option l 10 (sel)</option>
                </select>

CSS

.ms2side__div select {
    width: 220px;
    float: left;
    border: 1px solid #BFBFBF;
    background: white;
    font-size: 12px;
    color: #9D9D9D;
    font-family: Arial, Helvetica, sans-serif; 

    line-height: 25px;
}


optgroup {
   padding: 5px 0px
}