JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
/*!
 * modernizr v3.3.1
 * Build http://modernizr.com/download?-prefixedcss-prefixes-dontmin
 *
 * Copyright (c)
 *  Faruk Ates
 *  Paul Irish
 *  Alex Sexton
 *  Ryan Seddon
 *  Patrick Kettner
 *  Stu Cox
 *  Richard Herrera

 * MIT License
 */

/*
 * Modernizr tests which native CSS3 and HTML5 features are available in the
 * current UA and makes the results available to you in two ways: as properties on
 * a global `Modernizr` object, and as classes on the `<html>` element. This
 * information allows you to progressively enhance your pages with a granular level
 * of control over the experience.
*/

;(function(window, document, undefined){
  var tests = [];
  

  /**
   *
   * ModernizrProto is the constructor for Modernizr
   *
   * @class
   * @access public
   */

  var ModernizrProto = {
    // The current version, dummy
    _version: '3.3.1',

    // Any settings that don't work as separate modules
    // can go in here as configuration.
    _config: {
      'classPrefix': '',
      'enableClasses': true,
      'enableJSClass': true,
      'usePrefixes': true
    },

    // Queue of tests
    _q: [],

    // Stub these for people who are listening
    on: function(test, cb) {
      // I don't really think people should do this, but we can
      // safe guard it a bit.
      // -- NOTE:: this gets WAY overridden in src/addTest for actual async tests.
      // This is in case people listen to synchronous tests. I would leave it out,
      // but the code to *disallow* sync tests in the real version of this
      // function is actually larger than this.
      var self = this;
      setTimeout(function() {
        cb(self[test]);
      }, 0);
    },

    addTest: function(name, fn, options) {
      tests.push({name: name, fn: fn, options: options});
    },

    addAsyncTest: function(fn) {
      tests.push({name: null, fn: fn});
    }
  };

  

  // Fake some of Object.create so we...

CSS

html, body{
    min-height:100%;
}

body {
    /* display:flex; */
}

.context { position: absolute; width: 100px; height: 100px; }

#Red { background: red; z-index: 2;}
#Green { left: 80px; top: 80px; background: green; z-index: 1; }

.context div { position: absolute; width: 40px; height: 40px; }

#Red div { bottom: 5px; right: 5px; background: blue; z-index: 10; }
#Green div { top: 5px; left: 5px; background: yellow; z-index: 20; }

#Lightgrey { 
    position: absolute;
    width: 100px; height: 100px;
    top: 0; left: 75px;
    background: lightgray;
    /* opacity:0.5; */
    /* transform: scale(1,1); */
    /* mix-blend-mode: luminosity; */
    /* -webkit-filter: grayscale(50%); */
    /* perspective: 500px; */
    /* isolation:isolate; */
    /* position: fixed; */
    /* clip: rect(10px, 20px, 30px, 40px); */
    /* -webkit-clip-path: url(""); */
    /* clip-path: url(""); */
    /* -webkit-mask-image:url(""); */
    /* mask:url(""); */
    /* transform-style:preserve-3d; */
    /* will-change:display,opacity,transform; */
}

#Lightgrey div { 
    position: absolute;
    width: 40px; height: 40px;
    top: 20px; left: 20px;
    background: cyan;   
    /* z-index:100; */
}

#Darkgrey { 
    position: absolute; width: 100px; height: 100px;
    top: 40px; left: 85px; background: gray;
}

#result{
    position:absolute;
    left:200px;
}

JavaScript

// See: http://stackoverflow.com/questions/12190338/compare-html-elements-by-actual-z-index
// Dependencies: jQuery and Modernizr with options: _prefixes and prefixedCSS

// Successfully tested on the examples on:
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3

(function( $ ) {
    // Chrome has a filter property, but it's used for SVG - get the correctly prefixed -webkit-filter property
    // Reference: https://github.com/Modernizr/Modernizr/issues/981
    function getFilterPrefixed() {
        var elem = document.createElement('div');
        var testValue = 'grayscale(1)';
        var prop;
        var i;

        for (i = 0; i < Modernizr._prefixes.length; i++) {
            prop = Modernizr._prefixes[i] + 'filter';

            // Set-and-check: if the property holds a valid value, it's the one
            elem.style[prop] = testValue;
            if (elem.style[prop] == testValue) {
                return prop;
            }
        }
    }

    // Experimental function to get the correctly prefixed clip-path property
    // Chrome has a clip-path property, but it's used for SVG and doesn't create a new stacking contest
    // Get the correctly prefixed -webkit-clip-path property
    // Tested with Chrome, Firefox and Safari
    function getClipPathPrefixed() {
        var elem = document.createElement('div');
        var...