JSFiddle - React, Tailwind, and code Playground

by joshjs

HTML

<div class="gridInner ui-selectable" style="width: 1550px; height: 775px; "><div id="block-2805" data-id="2805" class="gridBlock ui-selectee" style="top: 0px; left: 0px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">A01 [0 items]</div>
                <ul class="blockCategories">
                    
                </ul>
            </div>
        
    
        
            <div id="block-2807" data-id="2807" class="gridBlock ui-selectee" style="top: 0px; left: 155px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">C01 [0 items]</div>
                <ul class="blockCategories">
                    
                </ul>
            </div>
        
    
        
            <div id="block-2808" data-id="2808" class="gridBlock ui-selectee" style="top: 0px; left: 232.5px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">D01 [0 items]</div>
                <ul class="blockCategories">
                    
                </ul>
            </div>
        
    
        
            <div id="block-2809" data-id="2809" class="gridBlock ui-selectee" style="top: 0px; left: 310px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">E01 [0 items]</div>
                <ul class="blockCategories">
                    
                </ul>
            </div>
        
    
        
            <div id="block-2810" data-id="2810" class="gridBlock ui-selectee" style="top: 0px; left: 387.5px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">F01 [0 items]</div>
                <ul class="blockCategories">
                    
                </ul>
            </div>
        
    
        
            <div id="block-2811" data-id="2811" class="gridBlock ui-selectee" style="top: 0px; left: 465px; height: 37.75px; width: 76.5px;">
                <div class="blockCode">G01 [0 items]</div>
                <ul class="blockCategories">
                    
         ...

CSS

.gridInner
{
    position: relative;
    border: 1px solid #666;
    border-top:0;
    border-left:0;
    overflow: hidden;
    background: #CEEEEE;
}

.gridBlock
{
    position: absolute;
    border: 1px solid #666;
    border-bottom: 0;
    border-right:0;
    overflow: hidden;
}

.blockCode
{
    font-weight:bold;
}

.ui-selected { background-color: orange; }
.ui-selecting { background-color: red; }

JavaScript

$(".gridInner").selectable();