JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/Simonwep/selection/master/gs/prism.js"></script>



  <main>

    <section class="demo">
    

      <section class="box-wrap boxes green">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </section>

    

  </main>

CSS

/**
 * Creator: Simon R.
 */

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #faf9f7;
}

header {
    text-align: center;
    font-family: 'Pacifico';
    letter-spacing: 0.2em;
    font-size: 2.5em;
    margin: 0.8em 0;
}

header .js {
    color: #14c3e3;
}

main > section {
    width: 100%;
    max-width: 50em;
    margin: 3em auto;
}

main > section .head {
    display: block;
    margin-bottom: 0.4em;
    font-family: 'Pacifico';
    font-size: 1.2em;
    text-align: center;
}

/* details */

main section.demo .head {
    margin-left: 0.7em;
}

main section.demo .box-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

main section.demo .box-wrap.green {
    margin-bottom: 3em;
}

main .box-wrap::after {
    display: block;
    content: '';
    clear: both;
}

main .boxes div {
    height: 2em;
    width: 5em;
    margin: 0.2em;
    background: #ddd;
    -webkit-box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.15em;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

main .boxes div.selected {
    -webkit-box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.05em 0.2em 0 rgba(0, 0, 0, 0.2);
}

main .boxes.green div.selected {
    background: green;
}

main .boxes.blue div.selected {
    background: #7fa0eb;
}

.selection {
    background: rgba(0, 0, 255, 0.1);
    border-radius: 0.1em;
    border: 0.05em solid rgba(0, 0, 255, 0.2);
}

main section.demo-code pre {
    background: #F4F1EF;
    border-radius: 0.2em;
}
 /* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
...

JavaScript

'use strict';
var _typeof = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function(a) {
        return typeof a
    } : function(a) {
        return a && 'function' == typeof Symbol && a.constructor === Symbol && a !== Symbol.prototype ? 'symbol' : typeof a
    };

function _toConsumableArray(a) {
    if (Array.isArray(a)) {
        for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
        return c
    }
    return Array.from(a)
}(function(a) {
    'use strict';
    if ('undefined' != typeof module && 'undefined' != typeof module.exports) module.exports = a();
    else if ('undefined' != typeof window && window.document) window.Selection = a();
    else throw new Error('selection.js requires a window with a document')
})(function() {
    'use strict';

    function a(a) {
        this.options = a ? a : {};
        var c = {
            class: 'selection-area',
            startThreshold: 0,
            disableTouch: !1,
            containers: [],
            selectables: [],
            startareas: ['html'],
            boundarys: ['html']
        };
        for (var e in c) e in a || (a[e] = c[e]);
        for (var f in this) '_' === f.charAt(0) && 'function' == typeof this[f] && (this[f] = this[f].bind(this));
        this.areaElement = function() {
            var a = document.createElement('div');
            return document.body.appendChild(a), d(a, {
                top: 0,
                left: 0,
                position: 'fixed'
            }), a
        }(), b(document, 'mousedown', this._onTapStart), this.options.disableTouch || b(document, 'touchstart', this._onTapStart)
    }
    function b(a, b, c) {
        a.addEventListener(b, c, j)
    }
    function c(a, b, c) {
        a.removeEventListener(b, c, j)
    }
    function d(a, b, c) {
        var d = a && a.style;
        if (d) if ('object' === ('undefined' == typeof b ? 'undefined' : _typeof(b))) {
            var n = Object.getOwnPropertyNames(b),
     ...