JSFiddle - React, Tailwind, and code Playground

by cFreed

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque libero euismod nulla porttitor egestas [...] tristique id enim. Sed dapibus sagittis porttitor. Suspendisse faucibus scelerisque eros, ac hendrerit orci scelerisque sit amet.</p>
<div id = "standout">
    <p>Everything inside this div will remain highlighted</p>
     <div id = "toggle">Lights toggle</div>
</div>
<p>Vestibulum interdum, odio ut congue imperdiet, justo ligula bibendum nisl, ac placerat orci eros [...] ctor. Cras sed erat massa, quis egestas leo. Vivamus dignissim lacinia leo, ac interdum nisi facilisis eget.</p>
<div id="the_lights"></div>

CSS

html{
                     width:100%;
                     height:100%;
                     margin:0px;
                }
                #the_lights{
                   background-color:#000;
                   height:100%;
                   width:100%;
                   position:absolute;
                   top:0;
                   left:0;
                   display:none;
                }
                #standout{
                     padding:5px;
                     background-color:white;
                     position:relative;
                     z-index:1000;
                }

JavaScript

$(document).ready(function(){
    $("#toggle").click(function () {
        $("#the_lights").fadeToggle("slow");
    });
});