JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pop_up">Я модальное окно
  <div class="timer">
    <div class="close">Закрыть окно</div>
  </div>
</div>

CSS

.pop_up {
  display: none;
  background: red;
  border: 1px solid red;
  color: white;
}
.close {
  display: none;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $('.timer').prepend('<div class="left">Можно будет закрыть через <span></span></div>');
  var msg = plural([' секунд',' секунду',' секунды']);
  var delay = 1,
    seconds = 7;
  $('.left span').text(seconds+msg(seconds));
  $('.pop_up').delay(delay * 1000).fadeIn(800, function() {
    var int;
    int = setInterval(function() {
      if (seconds > 1) {
        $('.left span').text((seconds - 1)+msg(seconds - 1));
        seconds--;
      } else {
        $('.left').remove();
        $('.pop_up .close').show();
        clearInterval(int);
      }
    }, 1000);
  });
});
function plural(arr) {
    var get = [0,1,2,2,2,0,0,0,0,0];
    return function(num) {
                if( String.prototype.slice.call(num, -2,-1) === '1' ) return arr[0];
        num = String.prototype.slice.call(num, -1);
                return arr[ get[num] ];
        }
}
jQuery('.close').click(function(e) {
    e.preventDefault();
    jQuery('.pop_up').fadeOut(0);
});