JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="chosen-select">
    <optgroup label="NFC EAST">
        <option data-user="yuvi">Dallas Cowboys</option>
        <option data-user="izak">New York Giants</option>
        <option data-user="yuvi">Philadelphia Eagles</option>
        <option data-user="yuvi">Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
        <option>Chicago Bears</option>
        <option>Detroit Lions</option>
        <option>Green Bay Packers</option>
        <option>Minnesota Vikings</option>
    </optgroup>
    <optgroup label="NFC SOUTH">
        <option>Atlanta Falcons</option>
        <option>Carolina Panthers</option>
        <option>New Orleans Saints</option>
        <option>Tampa Bay Buccaneers</option>
    </optgroup>
    <optgroup label="NFC WEST">
        <option>Arizona Cardinals</option>
        <option>St. Louis Rams</option>
        <option>San Francisco 49ers</option>
        <option>Seattle Seahawks</option>
    </optgroup>
    <optgroup label="AFC EAST">
        <option>Buffalo Bills</option>
        <option>Miami Dolphins</option>
        <option>New England Patriots</option>
        <option>New York Jets</option>
    </optgroup>
</select>

CSS

button {
    border: 1px solid #c11111;
    border-radius: 4px;
    background-color: #fff;
    
}

button:focus,
button:hover {
    background-color: #ddd;
}

JavaScript

$('#chosen-select');