JSFiddle - React, Tailwind, and code Playground

by piotr_cz

HTML

<select id="jform_layouts_rosters" size="25">
    <optgroup label="minimal">
        <option value="1">id</option>
        <option value="2">Username</option>
        <option value="3">settings: Color</option>
    </optgroup>
    <optgroup label="default">
        <option value="4">Name</option>
        <option value="5">webclient: Status</option>
        <option value="6">settings: Color</option>
        <option value="7">vCard: City</option>
    </optgroup>
    <option value="10">next</option>
</select>

CSS

select, optgroup { position: relative; }
optgroup: { background: #ff88ff; }
option: { background: #88f88; }

JavaScript

/*
new Sortables(
    '#jform_layouts_rosters optgroup', { 
    clone: false,
    opacity: .7
});
*/