JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<p class="d-all">Type some content in the textbox. Use the key bindings to show/remove the grid overlay. Watch how your content doesn't get wiped out by a page reload.</p>
<textarea class="d-all"></textarea>
<p class="d-all">Also worth noting that the default overlay script would not work in this fiddle's preview, it works on POSTs, and the refresh doesn't post.</p>

CSS

/* Grids generated by Gridset: https://gridsetapp.com */

/* desktop grid: 12 column / gutter: 2.08333333% ---------------------------------------- */
[class*=" d1"], [class^=d1], [class*=" d2"], [class^=d2], [class*=" d3"], [class^=d3], [class*=" d4"], [class^=d4], [class*=" d5"], [class^=d5], [class*=" d6"], [class^=d6], [class*=" d7"], [class^=d7], [class*=" d8"], [class^=d8], [class*=" d9"], [class^=d9], [class*=" d10"], [class^=d10], [class*=" d11"], [class^=d11], [class*=" d12"], [class^=d12], .d-all {
    display:block;
    float:left;
    margin-right:-100%;
}
/* desktop grid spans ----- */
 .d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12 {
    width:6.42361111%;
}
.d1-d11 .d1, .d1-d11 .d2, .d1-d11 .d3, .d1-d11 .d4, .d1-d11 .d5, .d1-d11 .d6, .d1-d11 .d7, .d1-d11 .d8, .d1-d11 .d9, .d1-d11 .d10, .d1-d11 .d11, .d2-d12 .d2, .d2-d12 .d3, .d2-d12 .d4, .d2-d12 .d5, .d2-d12 .d6, .d2-d12 .d7, .d2-d12 .d8, .d2-d12 .d9, .d2-d12 .d10, .d2-d12 .d11, .d2-d12 .d12 {
    width:7.02087287%;
}
.d1-d10 .d1, .d1-d10 .d2, .d1-d10 .d3, .d1-d10 .d4, .d1-d10 .d5, .d1-d10 .d6, .d1-d10 .d7, .d1-d10 .d8, .d1-d10 .d9, .d1-d10 .d10, .d2-d11 .d2, .d2-d11 .d3, .d2-d11 .d4, .d2-d11 .d5, .d2-d11 .d6, .d2-d11 .d7, .d2-d11 .d8, .d2-d11 .d9, .d2-d11 .d10, .d2-d11 .d11, .d3-d12 .d3, .d3-d12 .d4, .d3-d12 .d5, .d3-d12 .d6, .d3-d12 .d7, .d3-d12 .d8, .d3-d12 .d9, .d3-d12 .d10, .d3-d12 .d11, .d3-d12 .d12 {
    width:7.74058578%;
}
.d1-d9 .d1, .d1-d9 .d2, .d1-d9 .d3, .d1-d9 .d4, .d1-d9 .d5, .d1-d9 .d6, .d1-d9 .d7, .d1-d9 .d8, .d1-d9 .d9, .d2-d10 .d2, .d2-d10 .d3, .d2-d10 .d4, .d2-d10 .d5, .d2-d10 .d6, .d2-d10 .d7, .d2-d10 .d8, .d2-d10 .d9, .d2-d10 .d10, .d3-d11 .d3, .d3-d11 .d4, .d3-d11 .d5, .d3-d11 .d6, .d3-d11 .d7, .d3-d11 .d8, .d3-d11 .d9, .d3-d11 .d10, .d3-d11 .d11, .d4-d12 .d4, .d4-d12 .d5, .d4-d12 .d6, .d4-d12 .d7, .d4-d12 .d8, .d4-d12 .d9, .d4-d12 .d10, .d4-d12 .d11, .d4-d12 .d12 {
    width:8.62470863%;
}
.d1-d8 .d1, .d1-d8 .d2, .d1-d8 .d3, .d1-d8 .d4, .d1-d8 .d5, .d1-d8 .d6,...

JavaScript

// Gridset Overlay JS

gs = {

    init: function () {

        if (window.location.href.match('gridset=show')) gs.show();

        gs.bind(document, 'keydown', function (e) {

            if (!e) var e = window.event;

            if (e.metaKey || e.ctrlKey) {

                switch (e.which || e.keyCode) {
                    case 71:

                        var gw = document.querySelectorAll('.gridsetoverlaywrap, #gridsetoverlaystyles, #gridscreenwidthwrap');

                        if (gw.length == 0) if (window.history) {
                            window.history.replaceState({}, null, window.location.href + '?gridset=show');
                            gs.show();
                        } else window.location.href = window.location.href + '?gridset=show';
                        else if (window.history) {
                            window.history.replaceState({}, null, window.location.href.replace('?gridset=show', ''));
                            gs.remove();
                        } else window.location.href = window.location.href.replace('?gridset=show', '');
                        gs.prevent(e);
                        break;

                }

            }


        });

    },

    width: function () {

        var swv = document.getElementById('gridscreenwidthval');
        if (swv) swv.innerHTML = window.innerWidth + 'px';

    },

    remove: function () {
        var gw = document.querySelectorAll('.gridsetoverlaywrap, #gridsetoverlaystyles, #gridscreenwidthwrap');
        for (var i = 0; i < gw.length; ++i)
        gw[i].parentNode.removeChild(gw[i]);
    },

    show: function () {

        var b = document.getElementsByTagName('body')[0],
            gridareas = document.querySelectorAll('[class*=-showgrid]'),
            areacount = gridareas.length,
            wrapper = document.querySelectorAll('.container'),

            styles = '.gridsetoverlaywrap{padding:0...