JSFiddle - React, Tailwind, and code Playground

HTML

<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: 1em; }
#selectable .ui-selecting {
     background: #ccc; }
#selectable .ui-selected {
     background: #364ea2;
     color: white; }
#selectable {
     list-style-type:
     none; margin: 0;
     padding: 0;
     width: 60%; }
#selectable li {
     margin: 3px;
     padding: 0.4em;
     font-size: 1em;
     height: 14px; }

JavaScript

$( "#selectable" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();