JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<ul>
    <li>Arm A (control)</li>
    <li>Arm B (full w/40px blur)</li>
    <li>Arm B (full w/0px blur)</li>
    <li>Arm C (just background)</li>
</ul>
<div id="Examples"></div>

CSS

iframe {
  padding: 0;
  margin: 0;
  width: 345px;
  height: 570px;
}
body {
    margin-top: 0;

}
ul {
    padding: 0;
    margin: 0;
    position: fixed;
    background-color: #eee;
    font-family: 'Google Sans';
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.71);
}
li {
    text-align: center;
    margin-left: 8px;
    line-height: 40px;
    width: 338px;
    display: inline-block;
}
#Examples {
    padding-top: 45px;
}

JavaScript

(function(){/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
var aa=function(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}},m=function(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):{next:aa(a)}},n="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,d){if(a==Array.prototype||a==Object.prototype)return a;a[b]=d.value;return a},ba=function(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==
typeof global&&global];for(var b=0;b<a.length;++b){var d=a[b];if(d&&d.Math==Math)return d}throw Error("Cannot find global object");},ca=ba(this),q=function(a,b){if(b)a:{var d=ca;a=a.split(".");for(var h=0;h<a.length-1;h++){var g=a[h];if(!(g in d))break a;d=d[g]}a=a[a.length-1];h=d[a];b=b(h);b!=h&&null!=b&&n(d,a,{configurable:!0,writable:!0,value:b})}};
q("Symbol",function(a){if(a)return a;var b=function(g,l){this.A=g;n(this,"description",{configurable:!0,writable:!0,value:l})};b.prototype.toString=function(){return this.A};var d=0,h=function(g){if(this instanceof h)throw new TypeError("Symbol is not a constructor");return new b("jscomp_symbol_"+(g||"")+"_"+d++,g)};return h});
q("Symbol.iterator",function(a){if(a)return a;a=Symbol("Symbol.iterator");for(var b="Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array".split(" "),d=0;d<b.length;d++){var h=ca[b[d]];"function"===typeof h&&"function"!=typeof h.prototype[a]&&n(h.prototype,a,{configurable:!0,writable:!0,value:function(){return da(aa(this))}})}return a});
var da=function(a){a={next:a};a[Symbol.iterator]=function(){return this};return a},t=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)};
q("WeakMap",function(a){function b(){}function d(e){var f=typeof e;return"object"===f&&null!==e||"function"===f}function h(e){if(!t(e,l)){var f=new...