JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<body>
  <div class="wrap">
    при кліку по сірому фону (врапері) - удаляємо його
    <div class="box">сюда при кліку нада добавити клас..</div>
  </div>
</body>

CSS

* {
			  padding: 0;
			  margin: 0;
			}
			
			body {
			  background-color: #ccc;
			}
			
			.wrap {
			  width: 100%;
			  height: 150px;
        position: relative;
        z-index: 1;
			}
			
			.box {
			  width: 250px;
			  height: 50px;
			  margin: 0 auto;
			  background-color: pink;
        position: relative;
        z-index: 9;
			}
			
			.active {
			  background-color: blue !important;
			  color: yellow !important;
			}

JavaScript

$(document).ready(function() {
  $('.wrap').click(function() {
    $(this).find('.box').addClass("active");
  });
});
$('.wrap').click( function(event){
  if( $(event.target).closest(".box").length ) 
    return;
  $(".box").removeClass("active");
  event.stopPropagation();
});