JSFiddle - React, Tailwind, and code Playground
HTML
<div id="overlay" class='visibility-hidden' style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 210, 124, 0.21);z-index: 1;"></div>
<button class='read_mode'>Click here For Read mode</button>
CSS
.visibility-hidden{
display:none;
}
.visibility-true{
display:block;
}
JavaScript
$('.read_mode').click(function(){
alert("Now you can NOT click the button");
$("#overlay").removeClass("visibility-hidden").addClass("visibility-true");
});