JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="page">
    <div class="table grid">
        <div class="header row">
            <div class="header cell gridCell">A</div>
            <div class="cell gridCell">B</div>
            <div class="cell gridCell">C</div>
            <div class="cell gridCell">D</div>
        </div>
        <div class="row">
            <div class="header cell gridCell">1</div>
            <div class="cell gridCell">The</div>
            <div class="cell gridCell">Quick</div>
            <div class="cell gridCell">Brown</div>
        </div>
        <div class="row">
            <div class="header cell gridCell">2</div>
            <div class="cell gridCell">Fox</div>
            <div class="cell gridCell">Jumped</div>
            <div class="cell gridCell">Over</div>
        </div>
        <div class="row">
            <div class="header cell gridCell">3</div>
            <div class="cell gridCell">The</div>
            <div class="cell gridCell">Lazy</div>
            <div class="cell gridCell">Dog</div>
        </div>
    </div>
</div>

CSS

div.page { font-size:400%; height: 500px; width: 500px; overflow:hidden; }
div.table { display:table; border-top: 1px black solid; border-left: 1px black solid;}
div.row { display:table-row; }
div.cell { display:table-cell; border-bottom: 1px black solid; border-right: 1px black solid;}

div.border { border: 1px black solid; }

JavaScript

(function($) {
    $.fn.freezeTable = function() {
        var frozenx = 1;
        var frozeny = 1;
        if (arguments) {
            if (arguments.length > 1) {
                frozenx = arguments[0];
                frozeny = arguments[1];
            }
            else if (arguments.length === 1) {
                if (arguments[0].x) frozenx = arguments[0].x;
                if (arguments[0].y) frozeny = arguments[0].y;
            }
        }
        
        var t = $(this);
        if (!t.is('div.table')) return;
        
        var container = $('<div style="position:relative">');
        container.css('height', '100%');
        container.css('width', '100%');
        container.css('overflow', 'scroll');
        t.wrap(container);
        container = t.parent();
        
        var topCopy = $('<div>').appendTo(container);
        var leftCopy = $('<div>').appendTo(container);
        var topLeftCopy = $('<div>').appendTo(container);
        
        var tableClone = t.clone()
            .css('position', 'absolute')
            .css('top', '0')
            .css('left', '0');
        var leftDiv = tableClone.clone();
        var topLeftDiv = tableClone.clone();
        var topDiv = tableClone.clone();
        
        leftDiv = leftDiv.appendTo(leftCopy);
        topLeftDiv = topLeftDiv.appendTo(topLeftCopy);
        topDiv = topDiv.appendTo(topCopy);
        
        function updateFrozen() {
            leftDiv.html('');
            topLeftDiv.html('');
            topDiv.html('');
            var allRows = t.find('div.row');
            var columnCount = $(allRows[0]).find('div.cell').length;
            var rowCount = allRows.length;
            
            for (var y = 0; y < rowCount; y++) {
                var row = $(allRows[y]);
                var cells = row.find('div.cell');
                var rowClone = row.clone().html('')
                    .css('position', 'absolute')
                    .css('height', row.height());
              ...