JSFiddle - React, Tailwind, and code Playground
HTML
<div id="js-disabled-warning">
<div class="message">
<p>You're using this site with javascript disabled (set by manually or with a browser extension like NoScript)!</p>
<p>Javascript is essential for using this site. Please enable it!</p>
<p>Here you can get some help: <a href="http://www.enable-javascript.com" target="_blank">http://www.enable-javascript.com</a></p>
</div>
</div>
<div class="site-content">
<p>Here comes your site content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti inventore velit sint aspernatur nemo quasi in officia doloribus dolores deserunt nostrum quas. Excepturi recusandae eum libero sint necessitatibus corporis id.</p>
</div>
CSS
#js-disabled-warning {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(0,0,0,.5);
}
#js-disabled-warning .message {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: table;
width: 30%;
background: #bada55;
padding: 20px;
border-radius: 5px;
}
JavaScript
(function() {
var alert_modal = document.getElementById('js-disabled-warning');
alert_modal.parentNode.removeChild(alert_modal);
})();