JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css">
<table>
    <tr>
        <td>aaa</td>
        <td>one</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>one</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>one</td>
    </tr>
</table>

<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

td {
    width: 50px;
    background: pink;
    padding: 5px;
    border: 1px solid black;
}

table {
    margin: 50px;
}

.ui-selected td {
    background: #f1f1f1;
}

.ui-selected {
    background: red;
}

JavaScript

$("#selectable").selectable();