JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="test">テストです</div>
<div class="one">1</div>
<div class="two">2</div>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

CSS

body:before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
  z-index: -1;
  opacity: 0;
  transition: all .5s;
}
body.closed:before {
  z-index: 999;
  opacity: 1;
}
.test {
  position: relative;
  z-index: 1000;
  background-color: yellow;
}
.test.closed {
  background-color: purple;
}

.one.closed {
  background-color: gold;
}

.two.closed {
  background-color: green;
}

JavaScript

$('.test').click(function(){
	var $this = $(this);
  $this.toggleClass('closed');
  var flag = $this.hasClass('closed');
  
  $('.one').toggleClass('closed', flag);
  $('.two').toggleClass('closed', flag);
  $('body').toggleClass('closed', flag);
});