JSFiddle - React, Tailwind, and code Playground

by jelane20

HTML

<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
    <fieldset>
        <label for="test">label</label>
<select name="test" id="one">
    <option>this is a lot of text with a break | here is the break</option>
    <option>this is line 2 of the option | another here is the break</option>
    <option>this is yet another break | here is the break</option>
            </select>
        </fieldset>
    </form>

CSS

select {
    width: 200px;
}
.wrap span.ui-selectmenu-item-header, .wrap ul.ui-selectmenu-menu li a {
    text-decoration: underline !important;
}