JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="frame">
  <p> Nam sodales magna non velit mattis id pellentesque tortor adipiscing.  Mauris porttitor, purus ac rutrum sagittis, nisi elit consequat augue,  at dictum odio tellus quis lorem. Suspendisse potenti. Proin hendrerit  faucibus augue a lobortis. Fusce dignissim ultrices tellus, ac cursus  dolor venenatis sed. Curabitur sodales lorem in quam feugiat et vehicula  risus mattis. Praesent sem risus, pulvinar id fringilla non,  ullamcorper non orci. Vestibulum posuere condimentum arcu, et pulvinar  augue egestas id. Cras at sapien non erat convallis faucibus eget sed  lectus. Aliquam sit amet massa eros, eget porttitor ante. </p>
  <p> Quisque risus lacus, blandit nec pretium sit amet, rutrum vitae ligula.  Aenean pulvinar tincidunt congue. Suspendisse tristique massa quis  ligula ultricies tempus. In pulvinar dui a erat fringilla interdum.  Pellentesque sollicitudin imperdiet felis vitae scelerisque. Nullam id  ligula a est scelerisque pharetra. Quisque eleifend tortor vitae ante  ullamcorper eu adipiscing erat consequat. Donec rutrum dignissim mi ut  lacinia. Nam et laoreet tortor. Proin ut sapien vel nisi faucibus auctor  quis id eros. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. Etiam vitae aliquam erat. Morbi  malesuada egestas imperdiet. </p>
  <p> Aliquam erat volutpat. Praesent pellentesque, felis at viverra porta,  purus ipsum porttitor justo, ac dapibus massa neque ut sem. Sed  imperdiet rhoncus faucibus. Suspendisse ornare nulla sit amet quam  tristique viverra. Nam ac urna ipsum, sit amet aliquet sapien. Maecenas  in justo vitae quam consequat aliquet. Donec sit amet purus odio, sit  amet bibendum nibh. Donec lacus elit, posuere id porta vel, volutpat in  justo. Phasellus consequat commodo est in malesuada. Morbi eget risus  arcu, pulvinar pretium lectus. Nulla et nisi a tellus malesuada pretium.  Cras laoreet dictum metus et rhoncus. Suspendisse tincidunt tempor  dolor, vitae rutrum dui mattis...

CSS

#frame{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    font-family:arial;
    padding-top:2000px;
    padding-bottom:2000px;
}

JavaScript

// Include Scroll tricks: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0(){5 d=2.h.z,e=\'u\'+(+v x()),f=\'u\'+(+v x()+1);d.k={o:0(){5 c,4=0(a){5 b=3,9=i;m(c){n(c)}y{a.p=\'k\';2.h.q.r(b,9)}c=s(0(){c=t},d.6.g)};2(3).w(\'8\',4).7(e,4)},l:0(){2(3).j(\'8\',2(3).7(e))}};d.6={g:A,o:0(){5 c,4=0(a){5 b=3,9=i;m(c){n(c)}c=s(0(){c=t;a.p=\'6\';2.h.q.r(b,9)},d.6.g)};2(3).w(\'8\',4).7(f,4)},l:0(){2(3).j(\'8\',2(3).7(f))}}})();',37,37,'function||jQuery|this|handler|var|scrollstop|data|scroll|_args|||||uid1|uid2|latency|event|arguments|unbind|scrollstart|teardown|if|clearTimeout|setup|type|handle|apply|setTimeout|null|D|new|bind|Date|else|special|300'.split('|'),0,{}));

                                                                                                                                                                                                                                   // Blur Settings
var length = 30;
var lightness = 20;
var target = $('#frame');

                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                   // Create CSS value from values
var shadow = '';
for (var i = length; i > 0; i--) {
    shadow += '0 ' + ((length - i) + 1) + 'px 0 rgba(0, 0, 0, ' + (i / (length * lightness)) + '), ';
}
for (var i = length; i > 0;...