JSFiddle - React, Tailwind, and code Playground

by RichieHindle

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.0/fastclick.min.js"></script>
<ol id="selectable">
</ol>

CSS

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
#selectable {
    height: 300px;
    overflow: scroll;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-overflow-scrolling: touch;
}

JavaScript

$(function() {
    var contents = "";
    for (var i = 0; i < 10; i++) {
        contents += "<li class='ui-widget-content'>Item " + i + "</li>";
    }
    
    $( '#selectable').html(contents).selectable({
        autoRefresh: false,
        filter: 'li'
    });
    
    FastClick.attach($('#selectable')[0]);
});