JSFiddle - React, Tailwind, and code Playground

HTML

<div class="closeBlock">Нажми меня, и ничего не произойдет</div>
<div class="simpleText">Нажми на любое место кроме синего блока, и красный блок скроется</div>
<div class="hidingBlock">Я скроюсь</div>

CSS

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'PT Sans', Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #fff;
}
.closeBlock {
  width: 100px;
  height: 100px;
  background: skyblue;
  padding: 10px;
}
.simpleText {
  width: 200px;
  height: 100px;
  background: green;
  padding: 10px;
}
.hidingBlock {
  width: 100px;
  height: 100px;
  background: coral;
  padding: 10px;
}

JavaScript

'use strict';

document.body.addEventListener('click', (e) => {
	let target = e.target;
  if (target.className === 'closeBlock') {
  	alert('Блок не скроется');
    return;
  }
  // Здесь будет выполняться твоя логика,
  // допустим скрытие оранжевого блока
  let hidingBlock = document.querySelector('.hidingBlock');
  hidingBlock.style.display = 'none';
});