JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="table">
    <div class="row selectable">
        <div class="ui-widget-content cell">1</div>
        <div class="ui-widget-content cell">2</div>
        <div class="ui-widget-content cell">3</div>
    </div>
    <div class="row selectable">
        <div class="ui-widget-content cell">1</div>
        <div class="ui-widget-content cell">2</div>
        <div class="ui-widget-content cell">3</div>
    </div>
</div>

CSS

#feedback { font-size: 1.4em; }
    .ui-selecting { background: #FECA40; }
    .ui-selected { background: #F39814; color: white; }
    .cell { margin: 3px; padding: 1px; float: left; width: 16px; height: 20px; font-size: 1em; text-align: center; }

div.table { display:table; }
div.row { display:table-row;}
div.cell { display:table-cell; }
input { width:100%}

JavaScript

$(function() {
        $( ".selectable" ).selectable();
        $('input').on('mousedown', function(e) {
            e.preventDefault();
        });
    });