JSFiddle - React, Tailwind, and code Playground

HTML

<span class="btn btn-active">btn</span>
<div class="modal hide">
  <div class="modal-text">окно</div>
</div>

CSS

html, body {
  height: 100%;
}
.btn {
  border: 1px solid red;
  padding: 5px 10px;
}
.btn-active {
  background: #f00;
  cursor: pointer;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  width: 100vw;
  height: 100vh;
  z-index: 2;
}
.modal-text {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  width: 50%;
  height: 50%;
  padding: 20px;
}
.hide {
  display: none;
}

JavaScript

$('.btn-active').on('click', function() {
	$('.modal').removeClass('hide').addClass('modal-active');
  //$('.modal').show(); //либо так вместо манипуляций с классом
  $(this).removeClass('btn-active');
});
  
$('.modal').click(function() {
	if ($(this).hasClass('modal-active')) {
	$(this).removeClass('modal-active').addClass('hide');
  $('btn').addClass('btn-active');
  }
})