JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rem dolor error ipsum, consectetur eaque cum voluptates atque itaque soluta? Incidunt ipsum voluptates sit ullam quibusdam, animi quo sed perspiciatis.</p>
  
  <button id="blur">Iniciar blur</button>
  
  <div id="modal">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor voluptatem adipisci quis consequatur eius molestias eos, libero autem veritatis cupiditate, quae neque quo laudantium accusamus labore, odio magni aut aliquid!</p>
  </div>
</body>

CSS

#modal {
  width: 200px;
  height: auto;
  background: black;
  color: white;
  padding: 20px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.2s cubic-bezier(0.75, 0.7, 0.35, 1);
  transition: all 0.2s cubic-bezier(0.75, 0.7, 0.35, 1);
}

.blur >:not(#modal) {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
}

.show {
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

JavaScript

$('#blur').click(function() {
	$('body').toggleClass('blur');
  $('#modal').toggleClass('show');
});