JSFiddle - React, Tailwind, and code Playground

by virendrachandak

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all">

<div class="demo">

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li id="one" class="ui-widget-content">Item 1</li>
    <li id="two" class="ui-widget-content">Item 2</li>
    <li id="three" class="ui-widget-content">Item 3</li>
    <li id="four" class="ui-widget-content">Item 4</li>
    <li id="five" class="ui-widget-content">Item 5</li>
    <li id="six" class="ui-widget-content">Item 6</li>
</ol>

</div>

CSS

#feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40;}
    #selectable .ui-selected { background: #F39814; color: white; opacity:1; border:2px solid #000000;}
    #selectable { list-style-type: none; margin: 0; padding: 0; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; float:left; height: 18px;  opacity:.5; border:2px solid #CCCCCC;}

JavaScript

$(function() {
    $("#selectable").bind("mousedown", function(e) {
        e.metaKey = true;
    }).selectable({
        stop: function() {
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function() {
                result.append($(this).attr("id") + ",");
            });
        }
    });

});