JSFiddle - React, Tailwind, and code Playground

by amanboss9

HTML

<div id="buttonPos">
        <button id="destroy" class="btn">Destroy</button>
        <button id="update2" class="btn">Update Table 1</button>
        <button id="update1" class="btn">Update Table 2</button>
        <button id="pause" class="btn">pause Navigation</button>
        <button id="resume" class="btn">resume Navigation</button>
        <button id="refresh" class="btn">refresh Navigation</button>
        <button id="shorten" class="btn">shorten table 1</button>
    </div>
    <div class="wrapper" id='mainCtrl'>
        <span> Table 1</span>
        <div class="box a navigable" tabindex="0">A</div>
        <div class="box b navigable" tabindex="0">B</div>
        <div class="box c navigable" tabindex="0">C</div>
        <div class="box d navigable" tabindex="0">D</div>
        <div class="box e navigable" tabindex="0">E</div>
        <div id="hide">
            <div class="box f navigable" tabindex="0">F</div>
            <div class="box g navigable" tabindex="0">G</div>
            <div class="box h navigable" tabindex="0">H</div>
            <div class="box i navigable" tabindex="0">I</div>
        </div>
    </div>
    <!-- 3rd Case -->
    <div class="wrapper1" id="secondCtrl">
        <span> Table 2</span>
        <div class="box1 header navigable" tabindex="0">Header</div>
        <div class="box1 sidebar navigable" tabindex="0">Sidebar</div>
        <div class="box1 content navigable" tabindex="0">Content
            <br /> More content than we had before so this column is now quite tall.</div>
        <div class="box1 footer navigable" tabindex="0">Footer</div>
    </div>

CSS

body {
        margin: 40px;
    }

    #buttonPos {
        padding-left: 39px;
        position: relative;
    }

    .box:focus {
        text-decoration: none;
        border: 5px solid red !important;
    }

    .wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px;
        grid-template-rows: [row] auto [row] auto [row];
        background-color: #fff;
        color: #444;
    }

    .wrapper span {
        font-size: 30px;
        position: absolute;
        left: 85px;
        margin-bottom: 10px;
        padding-top: 10px;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }

    .a {
        grid-column: col / span 2;
        grid-row: row;
    }

    .b {
        grid-column: col 3 / span 2;
        grid-row: row;
    }

    .c {
        grid-column: col;
        grid-row: row 2;
    }

    .d {
        grid-column: col 2 / span 3;
        grid-row: row 2;
    }

    .e {
        grid-column: col / span 4;
        grid-row: row 3;
    }
    /* Red */

    #mainCtrl {
        padding: 50px;
    }

    #buttonPos p {
        color: black;
        font-size: 24px;
        display: block;
    }

    .btn {
        border: 2px solid black;
        background-color: white;
        color: black;
        padding: 14px 28px;
        font-size: 16px;
        cursor: pointer;
    }

    #destroy {
        border-color: #f44336;
        color: red ;
        border-radius:5px;
    }
    /* Green */

    #update1 {
        border-color: #4CAF50;
        color: green;
    }

    #update2 {
        border-color: blue;
        color: green;
    }

    #pause {
        border-color: violet;
        color: blue;
    }

    #pause {
        border-color: black;
        color: pink;
    }

    #refresh {
        border-color: darkviolet;
        color: darkgrey;
    }

    #extend {
       ...

JavaScript

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.naviBoard=e():t.naviBoard=e()}(window,function(){return function(t){var e={};function i(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(r,n,function(e){return t[e]}.bind(null,n));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e){function i(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var r=window;function n(){this.currentEvent=null,this.componentRendered=null,this.matrixForNavigation=null,this.currentX=0,this.currentY=0,this.activeElement=null,this.prevComponentRendered=[],this.prevActiveElement=[],this.nextComponentRendered=null,this.arrayOfCoordinates=[],this.initialOffsetX=0,this.initialOffsetY=0,this.resume=!0,this.matrixWidth=0,this.matrixHeight=0}n.prototype._getLocationOfActiveElement=function(t){if(null!=this.matrixForNavigation)for(var...