JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="demo">
    <p>selectable 1</p>
<ol id="selectable1">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>
    <p>selectable 2</p>  
 <ol id="selectable2">
    <li class="ui-widget-content">Item 8</li>
    <li class="ui-widget-content">Item 9</li>
    <li class="ui-widget-content">Item 10</li>
    <li class="ui-widget-content">Item 11</li>
    <li class="ui-widget-content">Item 12</li>
    <li class="ui-widget-content">Item 13</li>
    <li class="ui-widget-content">Item 14</li>
</ol>

</div><!-- End demo -->

CSS

*{padding:10px;}
#selectable1 .ui-selecting { background: #FECA40; }
#selectable1 .ui-selected { background: #F39814; color: white; }
#selectable1 { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable1 li { margin: 3px; padding: 0.4em; font-size: 0.9em; height: 12px; }

#selectable2 .ui-selecting { background: #eee; }
#selectable2 .ui-selected { background: #0000ff; color: white; }
#selectable2 { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable2 li { margin: 3px; padding: 0.4em; font-size: 0.9em; height: 12px; }
p{margin:10px 0px;color:#ff0000;}

JavaScript

$(function() {
        $( "#selectable1,#selectable2" ).selectable();
});