JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<div class="ui-widget">
    <select name="viewing_role[]" multiple="multiple">
        <option value="ANYBODY" selected="selected">Anybody</option>
        <option value="AVATAR">Avatar</option>
        <option value="DEVELOPER">Developer</option>
        <option value="FACILITATOR">Facilitator</option>
        <option value="MONITOR">Monitor</option>
        <option value="STUDENT">Student</option>
        <option value="SUPERVISOR">Supervisor</option>
        <option value="SUPDEV">Supervisor-Developer</option>
        <option value="SYSADMIN">System Administrator</option>
    </select>
</div>

<select name="viewing_role[]" multiple="multiple">
    <option value="ANYBODY" selected="selected">Anybody</option>
    <option value="AVATAR">Avatar</option>
    <option value="DEVELOPER">Developer</option>
    <option value="FACILITATOR">Facilitator</option>
    <option value="MONITOR">Monitor</option>
    <option value="STUDENT">Student</option>
    <option value="SUPERVISOR">Supervisor</option>
    <option value="SUPDEV">Supervisor-Developer</option>
    <option value="SYSADMIN">System Administrator</option>
</select>

CSS

.ui-widget :active { outline: none; }