JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ol id="selectable">
    <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>

CSS

#feedback {
    font-size: 1.4em;
}
#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;
}
.ui-selectable-helper {
    display: none
}

JavaScript

$(function () {
    $("#selectable").selectable({
        start: function (event, ui) {
            event.originalEvent.ctrlKey = true;
        }
    });
});