JSFiddle - React, Tailwind, and code Playground

HTML

<button class="ouvrir-popin">Ouvrir une pop-in</button>
<div id="popin" style="display:none;">Coucou je suis une pop-in. Clique en dehors pour me fermer</div>

CSS

body,div {
    padding:50px;    
}
body { background-color: gray; }

#popin {
    position:absolute;
    left:20%;
    top: 20%;
    bottom: 20%;
    right: 20%;
    background-color: white;
}

JavaScript

(function($){
  var excluded = $([]);   

  $.event.special.clickout = {  
    setup: function(data){
      if(excluded.size()===0){
        $(document).on("click", $.event.special.clickout.handler);
      }
      $(this).data('outlimit', data && data.outlimit ? data.outlimit : document.body);        
      excluded = excluded.add(this);
    },
    teardown: function(data){
      $(this).removeData('outlimit');
      excluded = excluded.not(this);
      if(excluded.size()===0){
         $(document).off("click", $.event.special.clickout.handler);
      }
    },    
    add: function(handleObj){
      var old_handler = handleObj.handler;
      handleObj.handler = function(event,elm){
        event.target = elm; //redirect event
        old_handler.apply(this, arguments);
      };
    },
    handler: function(event){
      excluded.each(function(e,elm){
        var out = $(elm).data('outlimit') || document.body;
        if($(event.target).closest(elm).size() === 0 &&
           $(event.target).closest(out).size() !==0 ){
          //triggerHandler: stop event bubbling
          //extra parameters: click event target
          $(elm).triggerHandler( 'clickout', [ event.target ] );
        }
      });
    }      
  };
})(jQuery);
  

var popin = $("#popin");
var boutonOuverture = $("button.ouvrir-popin");

boutonOuverture.on("click", function(event){
     event.stopImmediatePropagation();
     popin.fadeIn(200).one("clickout",function(event){
        popin.fadeOut(200);
     });
});