JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="notcon-btn"></div>
<div class="notcon">
  <span>test</span>

</div>

CSS

.notcon {
  border: 2px solid #666;
  background-color: #eee;
  width: 50%;
  height: 100px;
  margin: auto;
  margin-top: 40px;
  position: absolute;
  top: 100px;
  left: 25%;
}

.notcon-btn {
  border: 2px solid #666;
  width: 100%;
  height: 400px;
  position: relative;
}

JavaScript

$(document).ready(function() {
  $(document).mouseup(function(e) {
    var subject = $(".notcon");

    if (e.target.className != subject.attr('class') && !subject.has(e.target).length) {
      subject.fadeOut();
    }
  });
});

//http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it