JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.min.css">
<body>
  <button class="btn">Мне нравится</button>
  <div id="likes">Привет, я закроюсь после нажатия на крестик</div>
</body>

CSS

#likes {
  display: none;
  width: 150px;
  background-color: #fff;
  padding: 20px 10px 10px;
  margin-top: 10px;
  font-family: sans-serif;
  line-height: 1.5;
  position: absolute;
  z-index: 100;
}

.btn-close {
  position: absolute;
  top: 0;
  right: 0;
}

.bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
}

JavaScript

$(document).ready(function() {

	var
  btn = $('.btn'), // кнопка для нажатия
  likes = $("#likes"), // попап
  close = $('<button class="btn-close">х</button>').appendTo(likes), // Создаем внутри попапа кнопку закрыть
  bg = $('<div class="bg"></div>').appendTo('body'), // затемнение
  time = 3000; // время до закрытия

  function closePopup() { // функция закрытия попапа
    likes.removeClass().addClass('animated zoomOut'); // скрываем попап
    bg.hide();
  }

  btn.click(function() { // ловим нажатие
  	bg.show();
    likes.fadeIn().removeClass().addClass('animated zoomIn'); // показываем попап
   // setTimeout(closePopup, time); // скрываем попап за указанное время
  });
  
  close.click(function() {
  	closePopup();
  })

});