JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<p>
adssda
sadlkfjafdsk
</p>

<div>
<div class='lowlight-content' id='normal'>
Hey    
</div>
</div>
<div class='lowlight-content' id='float'>
Hey    
</div>

dsaffds
fdsaafdsfds

<div class='lowlight-overlay'></div>

CSS

.lowlight-overlay {
    display:none; 
}
body.lowlight .lowlight-content { 
    z-index: 2147483647;
    position:relative;
    -webkit-user-select:auto;
    -moz-user-select:auto;
    -o-user-select:auto;
    user-select:auto;
}
body.lowlight .lowlight-overlay { 
    position: absolute; 
    display:block;
    top: 0; left:0; right:0; bottom:0; 
    background: rgba(255, 0, 0, .8); 
    z-index:2147483646;
}

body.lowlight { 
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}
/*
body.lowlight :not(.lowlight-content, .lowlight-overlay) {
    z-index: -2;
    position:relative;
    -webkit-user-select:none;
}
*/

#normal { 
    background: green; 
    width: 100px; 
    height: 100px; 
} 

#float { 
    background: orange; 
    width: 100px; 
    float:right;
}

JavaScript

$("body").addClass("lowlight");