JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     jQuery.fn.hide_by_click = (function() {
         var arrSelector = [],
         tracking = function(event) {
             $.map(arrSelector, function(el) {
                 if (event.target != el && !$(el).has(event.target).length) $(el).fadeOut()
             })

         }
         return function(add) {
            $(document).off({'click' : tracking });
             this.each(function(indx, el) {
                 if (add) arrSelector.push(el);
                 else {
                     var indx = $.inArray(el, arrSelector);
                     if (indx != -1) arrSelector.splice(indx, 1)
                 }
             });
            arrSelector.length && $(document).on({'click' : tracking });
            return this
         }
     }())

     $(function() {

         $("#strochka").hide_by_click(true);

     });
  
  function hideDiv(){
    $('#strochka').hide();
}
  </script>
</head>

<body>
<div class="wrap">
<div id="strochka">
		<div id="strochka_link"><a href="/" title="zarabotok-forum.ru" rel="nofollow" target="_blank">Реклама :)</a></div>
		<div id="strochka_close"><a rel="nofollow" onclick="hideDiv();">X</a></div>
		</div>

CSS

#strochka {position:fixed; font-family:Tahoma; border-bottom:1px dotted green;
background:white; top:0px; right:0px;  width:100%; height:34px; z-index:99999; overflow:hidden;}
#strochka_link { float:left; text-align:left; display:block;width:90%; height:32px; line-height:32px; padding-left: 20px; }
#strochka_link a { display:block; color:#008000;  text-decoration:none;  font-weight:normal;  font-size:23px; }
#strochka_link a:hover {  text-decoration:underline;  font-weight:500; color:red;}
#strochka_close {
  font-size: 25px;
  font-family: "PT Sans";
  color: rgb(96, 106, 48);
  text-align: center;
  text-shadow: 2.5px 4.33px 3.6px rgba(0, 0, 0, 0.294);
  z-index: 2;
}