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/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ol id="selectable" class="ui-selectable">
	<li class="ui-widget-content ui-selectee">Item 1</li>
	<li class="ui-widget-content ui-selectee">Item 2</li>
	<li class="ui-widget-content ui-selectee">Item 3</li>
	<li class="ui-widget-content ui-selectee">Item 4</li>
	<li class="ui-widget-content ui-selectee">Item 5</li>
	<li class="ui-widget-content ui-selectee">Item 6</li>
	<li class="ui-widget-content ui-selectee">Item 7</li>
</ol>

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

#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; }

JavaScript

$(function() {
    $('#selectable').selectable({
        start: function(e) {
            e.originalEvent.ctrlKey = true;
        }
    })
});