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");

});