JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text-shadow-box" class="blackened">
    <div id="tsb-box"></div>
    <p id="tsb-text">STOP SOPA!</p>
    <p id="tsb-link"><a href="http://americancensorship.org/">STOP SOPA!</a></p>
    <div id="tsb-wall">
        <div id="tsb-ie"></div>
        
<p>The LibreOffice website has gone dark today in protest of the U.S. Stop Online Piracy Act (SOPA) and PROTECT-IP Act (PIPA).  The U.S. Congress is about to censor the Internet.<br/>
If you are a citizen of the US, please consider <a href="https://action.eff.org/o/9042/p/dia/action/public/?action_KEY=8336">giving your Representative a call</a> and <a href="https://wfc2.wiredforchange.com/o/9042/p/dia/action/public/?action_KEY=8173">writing a letter to Congress</a>.<br/>
Not in the US? Then please <a href="http://americancensorship.org/#petition-state-department">sign the petitition to the state department</a></p>
<p>Learn more at <a href="http://americancensorship.org/">AmericanCensorship.org</a><br/>
<small><a id="sopaproceed" href="javascript:void()">click here to proceed to the regular website</a></small></p> 
    </div>
    <div id="tsb-spot"></div>
</div>
<p> all the regular content</p>

CSS

div.blackened {background-color:black; position: fixed; width:100%;height:100%; z-level: 999; color:white; display:none;}
#text-shadow-box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #444;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
}

#text-shadow-box #tsb-text,
#text-shadow-box #tsb-link {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 1em;
    margin: -0.77em 0 0 0;
    font-size: 90px;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
}

#text-shadow-box #tsb-text {
    font-size: 100px;
    color: transparent;
    text-shadow: black 0px -45.2px 19px; 
}

#text-shadow-box #tsb-link a {
    color: #999;
    text-decoration: none;
}

#text-shadow-box #tsb-box,
#text-shadow-box #tsb-wall {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 60%;
}

#text-shadow-box #tsb-box {
    -webkit-box-shadow: black 0px -45.2px 39px;
    -moz-box-shadow: black 0px -45.2px 39px;
}

#text-shadow-box #tsb-wall {
    background: #999;
}

#text-shadow-box #tsb-wall p {
    position: relative;
    font-size: 18px;
    line-height: 1.5em;
    text-align: justify;
    color: #222;
    width: 550px;
    margin: 1.5em auto;
    cursor: default;
}

#text-shadow-box #tsb-wall p a {
    color: #fff;
}

#text-shadow-box #tsb-wall p a:hover {
    text-decoration: none;
    color: #000;
    background: #fff;
}

#tsb-spot {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
}

JavaScript

/**
 * Zachary Johnson
 * http://www.zachstronaut.com
 * I place the following code in the public domain.
 *
 * Fork it on GitHub: https://github.com/zachstronaut/stop-sopa
 */
 
var text = null;
var spot = null;
var box = null;
var boxProperty = '';

init();

function init() {
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot');
    box = document.getElementById('tsb-box');
    
    if (typeof box.style.webkitBoxShadow == 'string') {
        boxProperty = 'webkitBoxShadow';
    } else if (typeof box.style.MozBoxShadow == 'string') {
        boxProperty = 'MozBoxShadow';
    } else if (typeof box.style.boxShadow == 'string') {
        boxProperty = 'boxShadow';
    }

    if (text && spot && box) {
        document.getElementById('text-shadow-box').onmousemove = onMouseMove;
        document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    }
}

function onMouseMove(e) {
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
        return;
    }
    
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
    
    if (boxProperty) {
        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
    }
    
    xm = e.clientX - Math.floor(window.innerWidth / 2);
    ym = e.clientY - Math.floor(window.innerHeight / 2);
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
jQuery("div.blackened").fadeIn("slow");
jQuery("#sopaproceed").click(function() { jQuery("div.blackened").fadeOut("slow"); });